Effets Rollover à l'aide de :hover

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.

<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.

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...).

Voir l'exemple !

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 !)

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

Voir l'exemple !

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).

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).

Voir l'exemple !

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;
}

Voir l'exemple !

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.

• Firefox ;
• Mozilla 1.3+ / SeaMonkey ;
• MSIE 8 ;
• Opéra 7+.

• content ;
• background-image ;
• background-repeat.

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).

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

Résultat théorique en image :

Voir l'exemple !

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 ? (cliquez sur le lien suivant pour voir la solution).

Voir le résultat !

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 qu'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.

<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.

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.

Voir l'exemple !

Changer la taille d'une image :

Voir l'exemple !

Ah, vous voulez savoir comment on peut zoomer une image comme ça ? Et bien, ce sera le sujet d'un de mes prochains cours sur le "Zoom d'image".