Чи існує протилежний CSS псевдоклас до: hover?

Чи є в CSS псевдо-клас для вказівки

:not(:hover)

Або це єдиний спосіб вказати предмет, на який не наводять курсор?

Я пройшов кілька посилань CSS3, і я не бачу жодної згадки про псевдо-клас CSS, щоб вказати протилежність: hover.

Так, використовуйте :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>

В іншому випадку ... просто використовуйте логіку за замовчуванням:

.child{
   opacity: 0.2;
}
.child:hover{
   opacity: 1;
}

Не існує такого псевдокласу. Не потрібно, коли ви можете просто використовувати :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(), або на більш пізньому рівні Selectors, оскільки він не з'явився в CSS2 (де :hoverвперше був представлений більше 17 років тому, і вперше впроваджений в IE4 ще рік тому). Вводити його на більш пізньому рівні було б безглуздо, оскільки автори просто були б змушені продовжувати використовувати, :not(:hover)поки браузери все одно не почнуть впроваджувати цей новий псевдо-клас, і у них не було б причин переключатися.

Зверніть увагу, що це не те ж саме, що й наступне запитання, яке говорить про події проти станів (спочатку йдеться про, :focusа не про :hover, але застосовується той самий принцип): Чи має CSS селектор: blur (псевдо-клас)?

Якщо ви хочете відобразити щось лише при наведенні на щось інше, ви можете використовувати

selector:not(:hover)

подобається це:

section{
   font-size:3em;
}

div:not(:hover) + section{
 display:none;
}

<div>Hover on me</div>

<section>Peek A Boo!</section>

Є кілька незвичних ефектів та результатів при використанні, :not()про які слід пам’ятати:

• :not(:not(...)), :not(p::before)неможливо
• :not(*) очевидно, ніколи не застосовуватиметься
• :not(.foo)буде відповідати всьому, що не є .foo, включаючи теги, такі як <HTML>і<body>
• збільшує специфічність правила, наприклад, наприклад: #foo:not(#bar)буде відповідати тому самому елементу, що і простіший #foo, але має вищу специфічність.

andоперація з :not:

• Елементи, які не є <div>і не є <span>елементами: body :not(div):not(span){}

orоперація з :not, це ще недостатньо підтримується.

• Елементи, які не є .crazyабо .fancy:body :not(.crazy, .fancy){}

Джерело MDN

a {
  /*styles*/
} 

є звичайним (не наведене посилання)

a:hover {
  /*styles*/
} 

- це навішене посилання