Au survol

Parent Previous Next


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