CSS - Création D'apparences dynamiques - 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 :

1 2 3 4

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 :

1 2 3 4 5 6 7 8 9 10 11 12

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 :

• pour les liens par défaut (non survolés) ;
• pour les liens au survol.

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 :

1 2 3 4

p:hover /* Quand on pointe sur un paragraphe */ {   }