: hover, mas: não em uma classe específica

89

Como aplico um efeito de foco em um aelemento, mas não a um aelemento com a classeactive ?

a:hover(not: .active)

Parece que algo está faltando.

html css css-selectors Jürgen Paul
fonte

Respostas:

178

A notação funcional está ativada :not(), não :hover:

a:not(.active):hover

Se você preferir colocar :hoverprimeiro, tudo bem:

a:hover:not(.active)

Não importa qual pseudoclasse vem primeiro ou último; de qualquer forma, o seletor funciona da mesma forma. Acontece que é minha convenção pessoal colocar por :hoverúltimo, já que tendo a colocar as pseudo classes de interação com o usuário atrás das pseudo classes estruturais.

BoltClock
fonte
1
Tenha cuidado se precisar oferecer suporte ao IE antes da versão 9, pois eles parecem não oferecer suporte a not() msdn.microsoft.com/en-us/library/… . Talvez veja a resposta por @Mendhak se você fizer isso.
SharpC
7

Você tem a opção de usar o not()seletor. 

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

No entanto, isso pode não funcionar em todos os navegadores, pois nem todos implementam recursos CSS3.

Se você tem como alvo um grande público e deseja oferecer suporte a navegadores mais antigos, a melhor maneira seria definir um estilo para .active:hovere desfazer tudo o que estiver fazendo a:hover.

Mendhak
fonte