Effets Rollover à l'aide de :hover

| Pascale Lambert | Kerod |

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

- Titre : Effets Rollover à l'aide de :hover

- Auteurs : Pascale Lambert, Kerod

- Parution : 8 juillet 2010

- Mise à jour : 24 novembre 2010

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

Sommaire

- I. Transformation d'apparence d'un lien

- II. Changer la couleur de fond du lien

- III. Faire apparaître une image de fond au survol du lien

- IV. Changer une image de fond au survol du lien

- V. Cumuler image de fond et caractère

- VI. :hover et plus si affinités

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

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

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

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

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.

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 :

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

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.

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