: hover pero: no en una clase específica

88

¿Cómo aplico un efecto de desplazamiento sobre un aelemento, pero no a un aelemento con la clase?active ?

a:hover(not: .active)

Parece que falta algo.

html css css-selectors Jürgen Paul
fuente

Respuestas:

176

La notación funcional está activada :not(), no :hover:

a:not(.active):hover

Si prefiere poner :hoverprimero, está bien:

a:hover:not(.active)

No importa qué pseudoclase sea la primera o la última; de cualquier forma, el selector funciona igual. Resulta que es mi convención personal poner al :hoverfinal, ya que tiendo a colocar pseudoclases de interacción con el usuario detrás de pseudoclases estructurales.

BoltClock
fuente
1
Tenga cuidado si necesita ser compatible con IE antes de la versión 9, ya que parece que no son compatibles con not() msdn.microsoft.com/en-us/library/… . Quizás vea la respuesta de @Mendhak si lo hace.
SharpC
7

Tiene la opción de utilizar el not()selector. 

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

Sin embargo, es posible que esto no funcione en todos los navegadores, ya que no todos los navegadores implementan funciones CSS3.

Si se dirige a una gran audiencia y desea admitir navegadores más antiguos, la mejor manera sería definir un estilo para .active:hovery deshacer lo que esté haciendo a:hover.

Mendhak
fuente