Effets Rollover à l'aide de :hover

Date de publication : 08/07/2010 , Date de mise à jour : 24/11/2010

Par Pascale Lambert (mammouthland) (Blog)
 

Pour tout effet de rollover (c'est-à-dire de changement d'aspect d'un élément au survol de la souris), la pseudo-classe CSS à utiliser est :hover.
On fait tout avec ça : changements d'apparence de texte, de couleur de fond, d'apparition (ou de disparition) d'image, de zoom d'image, etc.
Enfin, en théorie... Car hélas MSIE n'implémente cette propriété qu'à partir de sa version 7 pour autre chose que des liens.
Ce tutoriel va donc passer en revue différentes options les plus recherchées et quelques petites choses plus "exotiques" en matière de rollover.
N'hésitez pas à nous faire part de votre avis sur cet article : 2 commentaires Donner une note à l'article (4)






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

info Voir l'exemple !

II. Changer la couleur 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;
}
info Voir l'exemple !

III. Faire apparaître une 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).

info Voir l'exemple !

IV. Changer une 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;
}
info Voir l'exemple !
warning 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.


V. Cumuler image de fond et caractère

Fonctionne avec :
  • Firefox ;
  • Mozilla 1.3+ / SeaMonkey ;
  • MSIE 8 ;
  • Opéra 7+.
Attributs utilisés :
  • 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).
Code CSS

#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 :

info Voir l'exemple !

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

info Voir le résultat !
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 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.
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.

info Voir l'exemple !
Changer la taille d'une image :

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



               Version PDF (Miroir)   Version hors-ligne (Miroir)
Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - Commentez Donner une note à l'article (4)
Feuille de style CSS de base - Commentez Donner une note à l'article (3)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (4.5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (3.5)
Listes à puces en image - 2 commentaires Donner une note à l'article (4.5)
Citations et retraits - Commentez Donner une note à l'article (4)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (4.5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (4.5)

Valid XHTML 1.0 TransitionalValid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 08/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. Cette page est déposée.

 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum CSS

Blogs

Hébergement

 
Partenaires

Hébergement Web