: hover, але: не для певного класу


88

Як застосувати ефект наведення до aелемента, але не до aелемента з класом active?

a:hover(not: .active)

Здається, чогось не вистачає.

Відповіді:


176

Функціональне позначення увімкнено :not(), а не :hover:

a:not(.active):hover

Якщо ви віддаєте перевагу ставити :hoverперше, це добре:

a:hover:not(.active)

Не має значення, який псевдо-клас буде першим чи останнім; в будь-якому випадку, селектор працює однаково. Це просто моя особиста умова, яку я ставлю :hoverостанньою, оскільки я схильний розміщувати псевдокласи взаємодії з користувачами за структурними псевдокласами.


1
Будьте обережні, якщо вам потрібно підтримувати IE до версії 9, однак, оскільки вони не підтримують not() msdn.microsoft.com/en-us/library/… . Можливо, побачите відповідь @Mendhak, якщо ви це зробите.
SharpC

7

Ви можете використовувати not()селектор.

a:not(.active):hover { ... }

Однак це може працювати не у всіх браузерах, оскільки не всі браузери реалізують функції CSS3.

Якщо ви націлені на велику аудиторію і хочете підтримувати старіші браузери, найкращим способом буде визначити стиль для .active:hoverі скасувати те, що ви робите a:hover.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.