: наведите курсор, но: не на определенный класс

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

a:hover(not: .active)

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

Ответ 1

Функциональная нотация находится на :not(), а не :hover:

a:not(.active):hover

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

a:hover:not(.active)

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

Ответ 2

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

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

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

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