CSS Débutants

Vous êtes ici > Index | Cours | CSS débutants | Rollover en CSS

Faire apparaître caractères ou images au survol de la souris (rollover)

A la question : Comment faites-vous pour faire apparaître des guillemets devant vos liens du menu ?, plusieurs réponses possibles :

Première méthode

Celle que j'utilisais au début a fait débat. Au vu des différents commentaires, suggestions et critiques, on peut l'abandonner au profit de celles qui suivent.

Deuxième méthode

Le guillemet est ici une image qui va être déclarée en image de fond (background-image) associé au a:hover (lien survolé) dans la feuille de style. Afin qu'elle n'apparaisse pas en mozaïque, on indiquera l'option no-repeat à l'attribut background-repeat. Reste à positionner correctement l'image par rapport au texte : à l'attribut background-position on indique les positions relatives à la ligne (horizontale - verticale). Le padding-left indique le retrait que prendra le texte lors du survol de la souris afin qu'il ne recouvre pas l'image.

Code (x)html

<div id="menu"><p>
<a href="#">menu 1</a><br />
<a href="#">menu 2</a><br />
<a href="#">menu 3</a>
</p>
</div>

Code CSS

#menu a:hover {
background-image:url(images/guill_rouge.png);
background-repeat:no-repeat;
background-position:1% 50%;
padding-left:15px;
}

Résultat

Troisième méthode

La méthode précédente interdit forcement une autre image de fond... Pour pouvoir combiner image de fond (ici gris_anim.gif) et guillemet, on peut utiliser l'attribut content et la pseudo-classe before.
Attention, MSIE 5.x et 6 n'implémentent pas ces propriétés, mozilla ne comprend la combinaison a:hover:before qu'à partir d'une version supérieure à 1.2.

Code CSS

#menu a:hover { 
background-image:url(images/gris_anim.gif);
background-repeat:no-repeat;
}
#menu a:hover:before { 
content:" » ";
}

Résultat

Résultat théorique en image :

Test :

Haut de page