: activ - CSS-Tricks

Anonim

:activeSelectorul pseudo schimbă aspectul unei legături în timp ce este activat ( a se face clic pe sau în alt mod activat). De obicei, se vede doar pentru o fracțiune de secundă și oferă feedback vizual că elementul a fost într-adevăr făcut clic. Este cel mai folosit în legăturile de ancorare ( ).

De exemplu, iată CSS care va face ca legăturile de ancorare să lovească un pixel (dând impresia că sunt împinse în spațiu tridimensional) în starea activă:

Vedeți Pen: starea activă de CSS-Tricks Team (@ css-tricks) pe CodePen.

: Activul se poate aplica și oricărui element. În stiloul de mai jos, făcând clic oriunde pe pagină, veți face întreaga pagină galbenă:

Vedeți Demo-ul stiloului: clasa psuedo activă de CSS-Tricks Team (@ css-tricks) pe CodePen.

Este cea mai bună practică să acoperiți toate „statele”, în special pentru legături. O modalitate ușoară de a face acest lucru este „LOVE HATE” sau

L: link
O
V: vizitat
E

H: plasați
A: activ
T
E

Este ideal să le faci în această ordine.

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; )

În caz contrar, spuneți dacă ați enumerat ultimul stil: vizitat, dacă linkul a fost vizitat, acesta va înlocui declarația: active și: hover, iar legătura ar fi întotdeauna purpurie, indiferent dacă plasați sau dacă linkul era activ (nu ideal).

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
Da 2.0.4+ orice 4+ 4+ TBD TBD