: aktiv - CSS-tricks

Anonim

Den :activepseudo 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