: hover mais: pas sur une classe spécifique

88

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

a:hover(not: .active)

Il semble qu'il manque quelque chose.

html css css-selectors Jürgen Paul
la source

Réponses:

176

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

a:not(.active):hover

Si vous préférez mettre en :hoverpremier, c'est très bien:

a:hover:not(.active)

Peu importe quelle pseudo-classe vient en premier ou en dernier; de toute façon, le sélecteur fonctionne de la même manière. Il se trouve que c'est ma convention personnelle de mettre en :hoverdernier car j'ai tendance à placer des pseudo-classes d'interaction utilisateur derrière des pseudo-classes structurelles.

BoltClock
la source
1
Soyez prudent si vous devez prendre en charge IE avant la version 9, car ils semblent ne pas prendre en charge not() msdn.microsoft.com/en-us/library/… . Peut-être voyez-vous la réponse de @Mendhak si vous le faites.
SharpC
7

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

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

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

Si vous ciblez un large public et souhaitez prendre en charge les navigateurs plus anciens, le meilleur moyen serait de définir un style pour le .active:hoveret d'annuler tout ce que vous faites a:hover.

Mendhak
la source