: hover ma: non su una classe specifica

Question

Come si applica un effetto hover su un elemento a, ma non su un elemento a con la classe active?

a:hover(not: .active) 

Sembra che manchi qualcosa.

Answer 1

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

a:not(.active):hover 

Se si preferisce mettere :hover prima, va bene:

a:hover:not(.active) 

Non importa quale pseudo-classe viene prima o ultimo; in entrambi i casi, il selettore funziona allo stesso modo. È proprio la mia convenzione personale a mettere l'ultimo :hover mentre tendo a posizionare le pseudo-classi di interazione dell'utente dietro le pseudo-classi strutturali.

Answer 2

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

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

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

Se si sta mirando a un vasto pubblico e si desidera supportare i browser meno recenti, il modo migliore sarebbe definire uno stile per lo .active:hover e annullare ciò che si sta facendo in a:hover.