L’option « hover » CSS permet de donner un autre comportement à un conteneur (div, lien, paragraphe, etc.) lorsque la souris va survoler celui-ci.

Vous l’avez sans doute remarqué, lorsque vous utiliser cette option « hover » pour changer le background d’une DIV par exemple, et que vous utilisez deux images distinctes, il y a un petit moment de latence entre la disparition de l’image actuelle et le chargement ce celle que vous voulez afficher.

Je vais vous donner une petite astuce bien connue de certains pour remédier à ce petit problème.

Voilà le code CSS pour bien comprendre :

Et les deux images concernées :

Ici, nous avons donc un « bouton » symbolisé par une flèche. Vous l’aurez compris, ma flêche va changer du marron au gris quand ma souris viendra se positionner au-dessus de la DIV .fleche.
Vous remarquez aussi que pour .fleche:hover, je n’ai qu’une ligne avec l’option background. Il n’est pas nécessaire de recopier tout ce qui se trouve dans .fleche car seul importe ici ce qui changera entre .fleche (normal) et .fleche:hover.

J’ai ajouté l’option no-repeat qui n’est pas obligatoire dans mon cas car la taille de ma DIV 32×32 fait exactement celle de mon image. Pour rappel, si vous ne fixez pas la taille de votre DIV et que vous voulez y insérer un background sans aucun autre contenu, rien ne s’affichera !

Dans cette situation, nous avons donc deux images distinctes ce qui peut entrainer un petit décalage d’affichage avec une connexion faiblarde.

Voyons maintenant la meilleure solution.

Elle n’est pas bien compliquée, il suffit d’utiliser une seule image ! L’avantage c’est qu’en arrivant sur la page l’image sera complètement chargée et il n’y aura rien de nouveau à charger lorsque le curseur sera au-dessus de notre DIV .fleche.

La technique est simple, il suffit d’utiliser l’option de positionnement de notre background. Ainsi, quand la souris est en dehors de la DIV .fleche, on affiche la partie de l’image avec la flèche marron et quand la souris vient se positionner sur la DIV .fleche, on décale tout simplement notre background de façon à rendre visible la flèche grise.

Suite à une remarque de Nicos dans les commentaires, le code a été mis à jour « Il ne faut pas oublier aussi les :active et les :focus.. Pour ceux qui navigue au clavier ou autre naviguateurs pour l’accesibilité.. »

Explication avec le code :

L’image concernée :

On pourrait encore plus simplifier, car ici on ne change que l’option de positionnement de notre arrière-plan, donc on obtient ceci :

Bien sûr, pour que cela fonctionne, il faut que vos deux flèches soient identiques et placées exactement aux deux extrémités.

Brice Capobianco

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager…
Fondateur de b-website.com