Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

Effets Rollover à l'aide de :hover

Sommaire

• Transformer l'apparence d'un lien
• Changer la couleur de fond du lien
• Faire apparaître une image de fond au survol du lien
• Changer une image de fond au survol du lien
• Cumuler image de fond et caractère
• :hover et plus si affinités

Transformation d'apparence d'un lien

Le B.A-BA du langage CSS : le lien qui change d'apparence au survol de la souris. Tellement trivial que ça ne demande pas beaucoup de développement, d'autant qu'il en a déjà été question dans le tutoriel sur la feuille de style CSS de base.

Code (x)html

<a href="toto.html">Le Site de Toto</a>

Par défaut, les liens sont en bleu soulignés et restent tels quels au passage de la souris.
Pour faire en sorte qu'ils perdent ce soulignement et prennent la couleur rouge au survol, il suffit d'indiquer la couleur voulue grâce à l'attribut color et le non soulignement à l'aide de la propriété CSS text-decoration dans a:hover.

Code CSS

a:hover {
color:red;
text-decoration:none;
}

Bien évidemment les choix de couleurs sont immenses et text-decoration peut prendre d'autres valeurs. Celles-ci sont : | none | underline | overline | line-through | blink |, ce qui correspond à | rien | souligné | surligné | barré | clignotant | (ce dernier étant à éviter, rien de plus agaçant et déroutant qu'un texte qui clignote...)

Haut

Transformation d'apparence de fond du lien

Couleur de fond

J'ai toujours mon petit lien vers le site du fameux Toto, et cette fois je voudrais que le fond change de couleur. Un truc qui déchire... du rouge sur fond noir (miam !)

Code CSS

a:hover {
color:red;
text-decoration:none;
background-color:black;
}

Apparition d'image de fond au survol du lien

Ouch, un peu brutal quand même le rouge sur fond noir, pas très lisible. Une petite image plutôt... Animée ? Pourquoi pas ! (Ne pas en abuser tout de même, des scintillements trop brusques sont dérangeants)

Code CSS

a:hover { 
color:red;
text-decoration:none;
background-image:url(images/gris_anim.gif);
background-repeat:no-repeat;
}

L'image (gris_anim.gif), placée dans le répertoire "images", est donc déclarée grâce à background-image. Par défaut, les images ainsi déclarées se répètent en mozaïque. Si on ne veut pas que ce soit le cas, on rajoute l'attribut background-repeat auquel on associe no-repeat (pas de répétition), ou repeat-x (répétition horizontale uniquement), ou repeat-y (répétition verticale uniquement).

Changement d'image de fond au survol du lien

Vous voulez que l'image ne s'anime que lors du survol ? Alors il faut définir plus précisement l'apparence du lien non visité (en plus du a:hover bien entendu, qui est à placer après).

a:link {
background-image:url(images/gris_non_anim.gif);
background-repeat:no-repeat;
text-decoration:none;
}

Note importante

J'ai précisé ci-dessus que le a:hover est à placer après le a:link. Ceci est important pour que ça fonctionne ! Il faut en effet respecter un ordre pour les pseudo-classes CSS.
En plus de :link et :hover, il existe aussi :active et :visited (lien actif, lien visité). L'ordre complet à respecter est :

1. :link
2. :visited
3. :hover
4. :active

Pour s'en souvenir, petit moyen mnémotechnique : LoVe HAte.

Chacune de ces pseudo-classes CSS peuvent se styliser en suivant le même principe qu'expliqué ci-dessus.

Haut

Cumuler image de fond et caractère

Pour pouvoir combiner une image de fond (ici gris_anim.gif) et un caractère (ici un guillemet), on peut utiliser l'attribut content et le pseudo-élément before (non implémenté par MSIE avant la version 8).

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 :

Haut

:hover et plus si affinités

Comme indiqué en début de tutoriel, le pseudo-élément :hover peut-être appliqué à n'importe quelle sauce... du moment que le navigateur graphique utilisé ne soit pas MSIE6.

Paragraphe survolé

Question : Que veut dire CSS ? (passer la souris sur le paragraphe grisé ci-dessous pour voir la solution)

CSS veut dire Cascading Style Sheets, c'est à dire feuilles de style en cascade.

Code CSS

p {
border:1px dotted #808080;
background-color:#F5F5F5;
color:#F5F5F5;
padding:5px;
}
p:hover {
color:black;
}

Menu déroulant

Ahhh, les menus déroulants. Ici, ce n'est juste d'un aperçu. Pour montrer que c'est possible. Il y a d'ailleurs d'autres méthodes que celle-ci. Mais c'est plus compliqué que cela en a l'air. Car, hélas, il faut en général rajouter une couche de javascript à cause de... MSIE6 bien sûr. Cela dit, vous trouverez dans ce tutoriel sur un menu horizontal déroulant, un exemple plus détaillé pour réaliser un menu full CSS sans javascript.

Code (x)html

<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a>
  <ul>
   <li><a href="">Item 2.1</a></li>
   <li><a href="">Item 2.2</a></li>
  </ul>
</li>
<li><a href="">Item 3</a></li>
</ul>

Le but est donc de dérouler les items 2.1 et 2.2 au survol de l'item 2.

Code CSS

li ul {
display:none;
}
li:hover ul {
display:block;
position:relative;
top:0;
left:-25px;
}

La liste imbriquée dans l'item 2 (li ul) est "inexistante" grâce au display:none. Dés qu'on passe sur l'élément de la liste contenant la sous liste, l'attribut display change de statut pour passer du "rien" (none) au "bloc" (block), et ainsi redevenir visible. Le sous menu apparaît. Les valeurs de positionnements ne sont là que pour faciliter "l'accrochage" de la sous liste avec la souris.

Changer la taille d'une image

Ah, vous voulez savoir comment on peut zoomer une image comme ça ? Et bien, suffit d'aller voir le tuto. "Zoom d'image"

Haut