Au survol
Nous allons découvrir dans ce chapitre plusieurs pseudo-formats CSS. Le premier que je vais vous montrer s'appelle :hover. Comme tous les autres pseudo-formats que nous allons voir, c'est une information que l'on rajoute après le nom de la balise (ou de la classe) dans le CSS, comme ceci :
a:hover {
} |
:hover signifie « survoler ». a:hover peut donc se traduire par : « Quand la souris est sur le lien » (quand on pointe dessus).
À partir de là, c'est à vous de définir l'apparence que doivent avoir les liens lorsqu'on pointe dessus. Laissez libre cours à votre imagination, il n'y a pas de limite.
Voici un exemple de présentation des liens, mais n'hésitez pas à inventer le vôtre :
a /* Liens par défaut (non survolés) */ { text-decoration: none; color: red; font-style: italic; }
a:hover /* Apparence au survol des liens */ { text-decoration: underline; color: green; } |
On a défini ici deux versions des styles pour les liens :
Le résultat se trouve à la figure suivante.
Changement d'apparence au survol de la souris
Sympa, n'est-ce pas ?
Même si on l'utilise souvent sur les liens, vous pouvez modifier l'apparence de n'importe quel élément. Par exemple, vous pouvez modifier l'apparence des paragraphes lorsqu'on pointe dessus :
p:hover /* Quand on pointe sur un paragraphe */ {
} |
Créé avec HelpNDoc Personal Edition: Outils facile d'utilisation pour créer des aides HTML et des sites web