Den :active
pseudo vælgeren ændrer udseendet af et link, mens den bliver aktiveret (bliver klikket på eller på anden måde aktiveret). Det ses normalt kun i et split sekund og giver visuel feedback om, at elementet faktisk blev klikket på. Det bruges mest på ankerlink ( ).
For eksempel er her CSS, der får ankerlink til at bumpe en pixel (giver indtryk af at blive skubbet i et tredimensionelt rum) i den aktive tilstand:
Se pennen: aktiv tilstand af CSS-Tricks Team (@ css-tricks) på CodePen.
: Aktiv kan også gælde for ethvert element. Klik på et vilkårligt sted på siden i pennen nedenfor for at gøre hele siden gul:
Se pendemo af: aktiv psuedo-klasse af CSS-Tricks Team (@ css-tricks) på CodePen.
Det er den bedste praksis at dække alle “stater”, især for links. En nem måde at gøre det på er "LOVE HATE" eller
L: link
O
V: besøgte
E
H: svæver
A: aktiv
T
E
At gøre dem i den rækkefølge er ideelt.
a:link ( /* Essentially means a(href), or that the link actually goes somewhere */ color: blue; ) a:visited ( color: purple; ) a:hover ( color: green; ) a:active ( color: red; )
Ellers skal du sige, at hvis du angav: besøgte stil sidst, hvis linket blev besøgt, ville det tilsidesætte erklæringen: aktiv og: svæver, og linket vil altid være lilla, uanset om du svæver, eller hvis linket var aktivt (ikke ideelt).
Browsersupport
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Ja | 2.0.4+ | nogen | 4+ | 4+ | TBD | TBD |