: наведите курсор, но: не на определенный класс
Как применить эффект наведения к элементу 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
.