: passa il mouse ma: non su una classe specifica

88

Come si applica un effetto al passaggio del mouse su un aelemento, ma non su un aelemento con la classe active?

a:hover(not: .active)

Sembra che manchi qualcosa.

html css css-selectors

— Jürgen Paul
fonte

176

La notazione funzionale è attiva :not(), non :hover:

a:not(.active):hover

Se preferisci mettere per :hoverprimo, va bene:

a:hover:not(.active)

Non importa quale pseudo-classe viene prima o ultima; in ogni caso, il selettore funziona allo stesso modo. Capita solo che sia una mia convenzione personale da :hoverultimo, poiché tendo a collocare le pseudo-classi di interazione dell'utente dietro le pseudo-classi strutturali.

— BoltClock
fonte

1

Fai attenzione se devi supportare IE prima della versione 9, anche se sembra che non supportino not() msdn.microsoft.com/en-us/library/… . Forse vedi la risposta di @Mendhak se lo fai.

— SharpC

7

Hai la possibilità di utilizzare il not()selettore.

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

Tuttavia, questo potrebbe non funzionare in tutti i browser, poiché non tutti i browser implementano le funzionalità CSS3.

Se ti rivolgi a un vasto pubblico e desideri supportare i browser meno recenti, il modo migliore sarebbe definire uno stile per .active:hovere annullare qualsiasi cosa tu stia facendo a:hover.

— Mendhak
fonte