Liens

Les pseudo-classes d'ancre

Les feuilles de style CSS permettent de styler les ancres grâce à 4 pseudo-classes :

• :link pour les liens non visités
• :visited pour les liens visités
• :hover pour les liens survolés
• :active pour les liens actifs

À cause de la nature en cascade des styles CSS, il est important de déclarer les pseudo-classes dans l'ordre indiqué ci-dessus. Le style de :hover doit être placé après :link et :visited, sinon il serait écrasé par ces 2 derniers styles. De plus, comme :active est défini après :hover, quand un lien est aussi bien survolé que actif, le dernier style est appliqué.

:hover quand il n'y a pas de texte

Normalement, la pseudo-classe :hover est appliquée quand un dispositif de pointage survole le texte du lien. Parfois, quand un lien est placé dans une cellule de tableau ou une barre de menu, verticale ou horizontale, il est nécessaire d'appliquer le style :hover quand le pointeur survole la cellule, là où il n'y a pas de texte.

Un contournement pour avoir ce comportement est de styler l'ancre comme un block avec une largeur fixe.

<a style="display: block; width: 150px;" href="#">Mon lien</a>

Articles connexes

• Problèmes soulevés par le pseudo élément hover (ajout du traducteur)
• Propriété CSS display

Interwiki Languages Links