: actif - Astuces CSS

Anonim

Le :activepseudo-sélecteur modifie l'apparence d'un lien lors de son activation (en cours de clic ou autrement activé). Il n'est généralement visible que pendant une fraction de seconde et fournit un retour visuel indiquant que l'élément a bien été cliqué. Il est le plus souvent utilisé sur les liens d'ancrage ( ).

Par exemple, voici le CSS qui fera baisser les liens d'ancrage d'un pixel (donnant l'impression d'être poussés dans un espace tridimensionnel) à l'état actif:

Voir le Pen: état actif par l'équipe CSS-Tricks (@ css-tricks) sur CodePen.

: Active peut également s'appliquer à n'importe quel élément. Dans le stylo ci-dessous, cliquer n'importe où sur la page rendra toute la page jaune:

Voir la démonstration de Pen de la classe: active psuedo par l'équipe CSS-Tricks (@ css-tricks) sur CodePen.

Il est recommandé de couvrir tous les «états», en particulier pour les liens. Un moyen simple de le faire est "AIMER LA HAINE" ou

L: lien
O
V: visité
E

H: survol
A: actif
T
E

Les faire dans cet ordre est idéal.

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

Sinon, disons que si vous avez répertorié le style: visité en dernier, si ce lien était visité, il remplacerait la déclaration: active et: hover et le lien serait toujours violet, que vous survoliez ou si le lien était actif (pas idéal).

Prise en charge du navigateur

Chrome Safari Firefox Opéra C'EST À DIRE Android iOS
Ouais 2.0.4+ tout 4+ 4+ À déterminer À déterminer