: schwebe aber: nicht auf eine bestimmte Klasse

86

Wie wende ich einen Hover-Effekt auf ein aElement an, jedoch nicht auf ein aElement mit der Klasse active?

a:hover(not: .active)

Scheint etwas zu fehlen.

html css css-selectors Jürgen Paul
quelle

Antworten:

172

Die funktionale Notation ist aktiviert :not(), nicht :hover:

a:not(.active):hover

Wenn Sie es vorziehen, :hoverzuerst zu setzen , ist das in Ordnung:

a:hover:not(.active)

Es spielt keine Rolle, welche Pseudoklasse zuerst oder zuletzt kommt; In beiden Fällen funktioniert der Selektor genauso. Es ist einfach meine persönliche Konvention, als :hoverletztes zu setzen, da ich dazu neige, Benutzerinteraktions-Pseudoklassen hinter strukturelle Pseudoklassen zu stellen.

BoltClock
quelle
1
Seien Sie vorsichtig, wenn Sie den IE vor Version 9 unterstützen müssen, da diese anscheinend not() msdn.microsoft.com/en-us/library/… nicht unterstützen . Vielleicht sehen Sie die Antwort von @Mendhak, wenn Sie dies tun.
SharpC
7

Sie haben die Möglichkeit, den not()Selektor zu verwenden. 

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

Dies funktioniert jedoch möglicherweise nicht in allen Browsern, da nicht alle Browser CSS3-Funktionen implementieren.

Wenn Sie eine große Zielgruppe ansprechen und ältere Browser unterstützen möchten, ist es am besten, einen Stil für das zu definieren .active:hoverund rückgängig zu machen, was auch immer Sie tun a:hover.

Mendhak
quelle