Vous voulez changer l’apparence d’un élément quand la souris passe dessus ? Vous cherchez comment rendre un lien plus visible au survol ? Vous avez besoin de la syntaxe exacte pour créer un effet hover en CSS ?
Ce guide vous montre comment utiliser la pseudo-classe :hover en CSS. Vous trouverez des exemples de code clairs pour ajouter de l’interactivité à vos pages web, simplement en détectant le survol de la souris.
Syntaxe et Exemple de Base de :hover
Le principe de :hover est de définir des styles qui s’appliquent uniquement lorsqu’un utilisateur place son pointeur sur un élément. La syntaxe est simple : vous prenez un sélecteur:hover, et à l’intérieur des accolades, vous mettez la ou les propriétés CSS à modifier.
Par exemple, pour changer la couleur d’un lien et le souligner au survol, le code est très direct. Voici un exemple concret qui change la `color` du texte.
C’est tout ce qu’il faut. Vous pouvez essayer ce code pour voir le résultat. Testez cet exemple pour le voir en action.
Aller plus loin : :hover sur d’autres éléments que les liens
L’effet :hover ne s’applique pas uniquement aux liens. Vous pouvez l’utiliser sur presque tous les éléments HTML pour améliorer l’expérience utilisateur.
- Les boutons (
<button>) - Les images (
<img>) - Les conteneurs (
<div>) - Les lignes d’un tableau (
<tr>)
Par exemple, on peut changer le background-color d’un bouton pour indiquer qu’il est cliquable. Le code suivant crée un bouton qui change de couleur au survol.
Cette technique est utile pour guider l’utilisateur et rendre l’interface plus intuitive. Voir un exemple sur plusieurs balises.
La règle d’or : L’ordre des pseudo-classes (LVHA)
Quand vous stylisez des liens, il y a une règle importante à connaître pour que :hover fonctionne bien. C’est la règle LVHA, qui définit l’ordre dans lequel vous devez déclarer les pseudo-classes.
L’ordre est le suivant : :link, :visited, :hover, :active. Si vous ne respectez pas cet ordre dans votre feuille de style, l’effet :hover risque de ne pas s’appliquer car un autre style (comme :visited) aura la priorité.
a:link– Un lien normal, non visité.a:visited– Un lien que l’utilisateur a déjà visité.a:hover– Un lien quand la souris est dessus.a:active– Un lien au moment du clic.
Voici un exemple de code qui respecte bien cet ordre. Il combine les styles pour link visited hover active.
En suivant cette structure, vous vous assurez que chaque état du lien s’affiche correctement. Testez l’ordre LVHA en direct pour comprendre son impact.
Compatibilité des navigateurs
La pseudo-classe :hover est l’une des plus anciennes et des mieux supportées en CSS. Vous n’avez aucun souci de compatibilité à vous faire sur les navigateurs modernes.
Le support est total depuis les toutes premières versions des navigateurs. C’est une fonctionnalité de base du web. Pour en avoir le coeur net, vous pouvez consulter ce tableau de compatibilité.
| Sélecteur | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
:hover |
Oui | Oui | Oui | Oui |
FAQ – Questions fréquentes sur CSS :hover
Peut-on utiliser :hover sur un appareil tactile ?
Non, l’effet :hover ne fonctionne pas sur les écrans tactiles comme les smartphones ou les tablettes. La raison est simple : il n’y a pas de curseur pour « survoler » un élément. L’utilisateur touche directement l’écran.
Pour les appareils tactiles, la pseudo-classe :active est plus pertinente. Elle se déclenche quand un utilisateur appuie sur un élément.
Pourquoi mon effet :hover ne s’applique pas ?
Si votre :hover ne fonctionne pas, vérifiez ces trois points courants :
- L’ordre LVHA n’est pas respecté : C’est la cause la plus fréquente pour les liens. Assurez-vous que
:hoverest bien déclaré après:linket:visited. - Un autre style a plus de priorité : Une autre règle CSS avec un sélecteur plus spécifique (par exemple avec un ID
#mon-bouton:hover) peut écraser votre style. C’est ce qu’on appelle la spécificité CSS. - Une simple faute de frappe : Vérifiez que vous avez bien écrit
:hoveret que le nom de votre classe ou de votre balise est correct.
