: hover но: не в конкретном классе

88

Как применить эффект наведения к aэлементу, но не к aэлементу с классом active?

a:hover(not: .active)

Кажется, чего-то не хватает.

Юрген Пауль
источник

Ответы:

176

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

a:not(.active):hover

Если вы предпочитаете ставить :hoverпервым, ничего страшного:

a:hover:not(.active)

Не имеет значения, какой псевдокласс идет первым или последним; в любом случае селектор работает одинаково. Это просто мое личное соглашение, которое я ставлю на :hoverпоследнее место, поскольку я склонен помещать псевдоклассы взаимодействия с пользователем за структурными псевдоклассами.

BoltClock
источник
1
Будьте осторожны, если вам нужно поддерживать IE до версии 9, поскольку они, похоже, не поддерживают not() msdn.microsoft.com/en-us/library/… . Если да, возможно, посмотрите ответ @Mendhak.
SharpC
7

У вас есть возможность использовать not()селектор.

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

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

Если вы ориентируетесь на большую аудиторию и хотите поддерживать старые браузеры, лучшим способом было бы определить стиль для .active:hoverи отменить все, что вы делаете a:hover.

Мендхак
источник