: hover mais: pas sur une classe spécifique

Comment appliquer un effet de survol à a élément, mais pas à a élément dont la classe est active ?

 a:hover(not: .active) 

Semble que quelque chose manque.

La notation fonctionnelle est activée :not() , pas :hover :

 a:not(.active):hover 

Si vous préférez mettre :hover first, c’est bien:

 a:hover:not(.active) 

Peu importe la pseudo-classe qui vient en premier ou en dernier, de toute façon, le sélecteur fonctionne de la même façon. Il se trouve que c’est ma convention personnelle de mettre :hover last car j’ai tendance à placer des pseudo-classes d’interaction avec les pseudo-classes structurelles.

Vous avez la possibilité d’utiliser le sélecteur not() .

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

Toutefois, cela peut ne pas fonctionner dans tous les navigateurs, car tous les navigateurs n’implémentent pas les fonctionnalités CSS3.

Si vous visez un large public et souhaitez prendre en charge des navigateurs plus anciens, le meilleur moyen serait de définir un style pour le .active:hover et annulez ce que vous faites dans a:hover .