[AUTOMATIQUE] Cet article a plus de 5 ans.
Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.

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 :

.fleche {
width:32px;
height:32px;
background: url('img/fleche_marron.png') no-repeat;
}

.fleche:hover,
.fleche:focus,
.fleche:active {
background:url('img/fleche_gris.png') no-repeat;
}

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 :

.fleche {
display:inline-block;
width:32px;
height:32px;
background: url('img/fleches.png') no-repeat right;
}

.fleche:hover,
.fleche:focus,
.fleche:active {
background:url('img/fleches.png') no-repeat left;
}

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 :

.fleche:hover,
.fleche:focus,
.fleche:active {
background-position: left;
}

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.

Article rédigé parBrice CAPOBIANCO

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager !

Coorganisateur des Meetups WordPress Rennes et fondateur de bweb.
Partager cet article

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Afficher les 4 commentaires

4 commentaires

  1. Exellente astuce Brice,
    J’ai essayé votre scripte et ca fonctionne nikel, plus de petit laps de temps entre les deux images :).
    Cependant, est-ce que ce raisonnement fonctionne sous IE? car chez moi ce n’est pas le cas :/

    Merci

    Jeb

    • Bonjour Jeb,
      oui ce raisonnement fonctionnement parfaitement sous IE.
      En revanche, vous n’êtes pas sans savoir que ce navigateur est capricieux. Il se peut donc que selon la version il y ait de petites modifications à effectuer.
      Si je peux vous aider n’hésitez pas à m’en dire plus.

  2. Il ne faut pas oublier aussi les :active et les :focus.. Pour ceux qui navigue au clavier ou autre naviguateurs pour l’accesibilité.. Ce qui donne :

    .fleche:hover,
    .fleche:focus,
    .fleche:active{
    background-position: left;
    }

    Il faut d’ailleur utiliser cette technique pour tous vos liens sur un site..