Есть ли противоположный CSS псевдокласс для: hover?

Ответ 1

Да, используйте :not(:hover)

.child:not(:hover){
  opacity: 0.3;
}

демоверсия jsBin

Другой пример; Я думаю, что вы хотите: "когда кто-то завис, затемните все остальные элементы".

Если мое предположение верно и предполагается, что все ваши селекторы находятся внутри одного и того же родителя:

.parent:hover .child{
    opacity: 0.2;      // Dim all other elements
}
.child:hover{
   opacity: 1;         // Not the hovered one
}

.child{
  display:inline-block;
  background:#000;
  border:1px solid #fff;
  width: 50px;
  height: 50px;
  transition: 0.4s;
}

.parent:hover .child{
  opacity: 0.3;
}
.parent .child:hover{
  opacity: 1;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Ответ 2

Нет такого псевдокласса. Там не обязательно, когда вы можете просто использовать :not(:hover). Вся точка псевдокласса :not() позволяет авторам писать отрицания, не указывая отдельных отрицаний каждого существующего (и будущего) динамического псевдокласса, где элемент может либо соответствовать, либо не соответствовать псевдоклассу.

Например, только некоторые элементы могут быть либо :enabled, либо :disabled - большинство элементов не являются ни потому, что семантика просто не применяется, но элемент может быть указан либо только указательным устройством (:hover), или нет (:not(:hover)). Предоставление отрицаний, которые могут быть достигнуты непосредственно с помощью :not(), сильно подорвало бы его полезность (хотя его все равно можно было бы использовать для отрицания любого другого простого селектора - или весь комплекс селекторов по дороге).

Аргумент о том, что такой псевдокласс был бы менее затратным с точки зрения затрат, довольно слаб. Самая наивная реализация такого псевдокласса была бы буквальной проверкой :not(:hover), которая была бы не лучше. Любые более сложные или оптимизированные реализации, и вы просите продавцов внедрить псевдокласс, который является либо быстрым, либо даже быстрее, чем :not(:hover), что-то, что уже достаточно необычно для использования, учитывая другие параметры, которые у вас есть, такие как каскадные и :not(:hover) (для всякий раз, когда каскадирование не является вариантом), к которому у вас есть доступ. Это просто не оправдывает время и усилия по спецификации, внедрению и тестированию альтернативы по крайней мере одному другому существующему методу, который на 100% функционально эквивалентен (и относится к по меньшей мере 80% сценариев). И там также вопрос о названии такого псевдокласса - вы не предложили его имя, и я тоже не могу думать о хорошем. :not-hover сокращается только на два байта и лишь незначительно меньше работает для ввода. Во всяком случае, это потенциально более запутанно, чем :not(:hover).

Если вы обеспокоены спецификой, обратите внимание, что псевдоклассы :not() не учитываются для специфичности; только его наиболее конкретный аргумент -. :not(:hover) и :hover одинаково специфичны. Поэтому специфика также не является проблемой.

Если вас беспокоит поддержка браузера, такой псевдокласс, если он будет представлен, скорее всего, был бы представлен рядом с :not() или на более позднем уровне селекторов, поскольку он не отображался в CSS2 (где :hover был впервые представлен более 17 лет назад и впервые реализован в IE4 еще до этого года). Представление его на более позднем уровне было бы бессмысленным, потому что авторы просто были бы вынуждены продолжать использовать :not(:hover), пока браузеры не начнут внедрять этот новый псевдокласс в любом случае, и у них не будет причин переключаться.

Обратите внимание, что это не то же самое, что следующий вопрос, который говорит о событиях против состояний (изначально о :focus, а не :hover, но применяется тот же принцип): Имеет ли CSS: селектор размытия (псевдокласс)?

Ответ 3

a {
  /*styles*/
} 

- нормальная (не зависающая ссылка)

a:hover {
  /*styles*/
} 

является зависающей ссылкой