Le hover dans les interfaces : définition, types d’effets et implémentation
Le hover est une pseudo-classe CSS et un état visuel d’un élément d’interface qui s’active lorsque le pointeur de la souris le survole. Ce mécanisme fournit un retour à l’utilisateur, confirmant que l’élément est prêt pour l’interaction. Selon MDN Web Docs (2026), la pseudo-classe :hover est prise en charge par tous les navigateurs modernes et est l’un des sélecteurs CSS les plus utilisés pour créer de l’interactivité.
Points clés
- Hover — pseudo-classe CSS :hover, activée lorsque le curseur de la souris survole un élément
- Retour — le hover confirme que l’élément est interactif et prêt à être cliqué
- Transitions CSS — transition ajoute de la fluidité aux effets hover, améliorant la perception
- Appareils tactiles — le hover n’existe pas sur les écrans mobiles, nécessitant une implémentation alternative
- Types d’effets — changement de couleur, ombre, échelle, fond, bordure et texte
Qu’est-ce que le hover en design web
Hover (de l’anglais « to hover ») — une réaction visuelle d’un élément d’interface lorsque le curseur de la souris se trouve dessus. Le terme est utilisé pour désigner à la fois la pseudo-classe CSS :hover et l’état de l’élément au survol.
Le concept de hover est né dans les premières interfaces graphiques du Xerox Alto (1973) et a été normalisé sur le web avec l’introduction de CSS2 en 1998. Depuis lors, le hover est devenu une partie intégrante de l’expérience utilisateur sur desktop.
Selon CSS Usage Statistics (2025), 94% des sites dans le top 1000 utilisent la pseudo-classe :hover pour au moins un élément. Le hover est le plus souvent appliqué aux boutons (89%), aux liens (85%) et aux cartes (62%).
Différence entre hover et les autres états
Hover ≠ active. :hover s’active au survol de la souris, :active s’active au moment du clic. :focus s’active lorsqu’un élément reçoit le focus via le clavier. Chaque état a son rôle. Le hover est un aperçu, active est une confirmation d’action.
La pseudo-classe :hover en CSS
La pseudo-classe :hover en CSS applique des styles à un élément lorsque l’utilisateur survole cet élément avec le curseur de la souris. Elle fonctionne avec n’importe quel élément HTML mais est le plus souvent utilisée avec des éléments interactifs.
css
/* Basic hover implementation */
.button {
background: #4A90D9;
color: white;
padding: 12px 24px;
border: none;
transition: all 0.3s ease;
}
.button:hover {
background: #357ABD;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(74,144,217,0.4);
}La spécificité du sélecteur :hover est la même que celle d’une classe (0,1,0). Si vous devez remplacer le hover pour un élément spécifique, utilisez un sélecteur avec une spécificité plus élevée. L’ordre de déclaration est important : si :hover est déclaré après :focus, le hover peut ne pas fonctionner au focus.
Pseudo-classes combinées
:hover peut être combiné avec d’autres pseudo-classes pour créer une logique complexe. Par exemple, .card:hover .card__title modifie le style du titre à l’intérieur de la carte lors du survol de la carte entière. Cela permet de créer des effets avec une animation imbriquée.
Types d’effets hover
Les effets hover sont classés selon le type de propriété modifiée. Chaque type convient à différents scénarios et crée une sensation spécifique chez l’utilisateur.
| Type d’effet | Propriété CSS | Exemple d’utilisation |
|---|---|---|
| Couleur | background, color | Le bouton change de couleur de fond au survol |
| Ombre | box-shadow | La carte se soulève avec une ombre |
| Échelle | transform: scale | L’icône s’agrandit au survol |
| Déplacement | transform: translate | L’élément se déplace vers le haut ou sur le côté |
| Soulignement | border-bottom, underline | Le lien reçoit un soulignement au survol |
| Filtre | filter: brightness | L’image devient plus claire ou plus foncée |
| Dégradé | background-image | Le fond se transforme au survol |
Le type le plus efficace est une combinaison d’effets de couleur et d’ombre. Material Design recommande d’utiliser le changement d’élévation (modification de la hauteur de l’ombre) comme type principal de retour hover.
Selon Google Material Design (2024), un effet hover doit être visible mais pas distrayant. La durée d’animation recommandée est de 200 à 300 millisecondes. Les effets trop rapides (moins de 100 ms) peuvent passer inaperçus, tandis que les effets trop lents (plus de 500 ms) irritent l’utilisateur.
Transitions CSS pour des effets fluides
La propriété CSS transition rend les effets hover fluides en animant les changements de propriétés dans le temps. Sans transition, le hover se déclenche instantanément, ce qui semble saccadé et désagréable à l’œil.
css
/* Different transitions per property */
.card {
transition:
box-shadow 0.3s ease-out,
transform 0.2s ease-out,
background 0.15s linear;
}
.card:hover {
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
transform: translateY(-4px);
}La durée de transition dépend du contexte. Pour les petits éléments (icônes, liens) — 150–200 ms. Pour les grands éléments (cartes, modales) — 250–350 ms. La fonction d’easing ease-out ralentit progressivement l’animation à la fin, créant une sensation naturelle.
Pratique recommandée — spécifier transition pour chaque propriété animée individuellement. La propriété all est pratique pendant le développement, mais en production il est préférable de définir des propriétés spécifiques pour l’animation afin d’éviter des effets inattendus.
Hover sur les appareils tactiles
Sur les appareils tactiles, le concept de hover n’existe pas : il n’y a pas de curseur qui puisse survoler un élément. Toucher un élément déclenche immédiatement un clic, contournant l’état hover. Cela crée des problèmes si l’interface repose exclusivement sur le hover.
Selon StatCounter (2026), 62% du trafic web mondial provient d’appareils mobiles. Ignorer l’absence de hover sur les écrans tactiles signifie perdre le contrôle de l’UX pour la majorité des utilisateurs.
css
/* Disable hover on touch devices */
@media (hover: none) and (pointer: coarse) {
.button:hover {
background: initial;
transform: none;
}
}La media query hover: none permet de détecter qu’un appareil ne prend pas en charge le hover. Sur ces appareils, les effets hover sont désactivés et l’interaction est basée sur les états :active et :focus. Une solution alternative consiste à afficher le contenu hover au toucher (le premier toucher montre le hover, le second effectue l’action), mais ce modèle dégrade l’UX.
Accessibilité des effets hover
L’accessibilité du hover est un aspect critique souvent négligé. Les utilisateurs qui naviguent dans l’interface avec le clavier ne peuvent pas activer :hover. Les fonctionnalités disponibles uniquement via le hover deviennent inaccessibles pour eux.
Règle WCAG 2.2 (Critère de succès 1.4.13 — Contenu au survol ou au focus) : le contenu qui apparaît au survol doit également être disponible au focus. Si le hover affiche des informations supplémentaires (infobulle, menu déroulant), ces mêmes informations doivent être disponibles au :focus.
css
/* Hover + focus for accessibility */
.tooltip-trigger:hover .tooltip,
.tooltip-trigger:focus .tooltip {
opacity: 1;
visibility: visible;
}
/* Disable animation for vestibular disorder */
@media (prefers-reduced-motion: reduce) {
*:hover {
transition: none;
}
}La media query prefers-reduced-motion — respectez les paramètres système de l’utilisateur. Si l’utilisateur a désactivé les animations dans son système, les effets hover doivent être appliqués instantanément, sans transition. Cela aide les personnes souffrant de troubles vestibulaires.
Recommandations supplémentaires : n’utilisez pas le hover pour des fonctions critiques, ne vous fiez pas uniquement à la couleur pour transmettre des informations au survol (ajoutez une icône ou du texte) et assurez un contraste suffisant pour les états de survol.
Questions fréquentes
Quelle est la différence entre :hover et :focus en CSS ?
:hover s’active lorsque la souris survole un élément. :focus s’active lorsqu’un élément reçoit le focus — par tabulation au clavier ou après un clic. Pour l’accessibilité, il est important de dupliquer les effets hover via :focus.
Peut-on utiliser le hover sur les appareils mobiles ?
Sur les appareils tactiles, le hover fonctionne de manière instable : le premier toucher active :hover, le second déclenche le clic. Cela crée de la confusion. Il est recommandé d’utiliser la media query @media (hover: none) pour désactiver les effets hover sur les écrans tactiles.
Comment créer un effet hover en JavaScript ?
Utilisez les événements mouseenter (survol) et mouseleave (sortie du curseur). Contrairement au CSS hover, JavaScript offre un contrôle total sur l’animation et permet de créer des effets séquentiels complexes avec des délais.
Pourquoi le hover ne fonctionne-t-il pas sur Safari mobile ?
iOS Safari a un traitement spécial de :hover. Après un toucher, l’élément entre dans l’état :hover et y reste jusqu’au toucher suivant. Cela peut entraîner le collage des styles hover. La solution est d’utiliser @media (hover: hover) pour appliquer le hover uniquement sur les appareils prenant en charge le survol.
Quel easing convient le mieux aux effets hover ?
ease-out (cubic-bezier(0, 0, 0.2, 1)) est le choix optimal pour le hover : un démarrage rapide et un ralentissement progressif à la fin. ease-in-out convient aux effets à deux phases (apparition et disparition). Évitez linear — il semble peu naturel.
Résumé
- Hover — pseudo-classe CSS :hover qui fournit un retour lorsque le curseur survole un élément
- Effets principaux — changements de couleur, d’ombre, d’échelle, de déplacement, de soulignement et de filtre
- Transitions CSS — transition ajoute de la fluidité avec une durée optimale de 200–300 ms
- Appareils tactiles — ne prennent pas en charge le hover, utilisez la media query @media (hover: none)
- Accessibilité — dupliquez le hover via :focus, respectez prefers-reduced-motion
- Meilleure pratique — combinaison d’effets de couleur et d’ombre avec ease-out en 250 ms
Nous développerons une application mobile clé en main
IT Sectr crée des applications iOS et Android pour les startups et les entreprises depuis 2017. Nous vous conseillerons et vous proposerons la meilleure solution.
Lisez aussi