:hover - Sélecteur CSS
Résumé des caractéristiques du sélecteur :hover
Description de la pseudo-classe :hover.
La pseudo-classe :hover cible les éléments qui sont survolés par le pointeur de la souris, et pendant le temps où
ce pointeur se trouve au dessus d'eux. Le bouton de la souris n'a pas besoin d'être enfoncé pour que :hover soit activé.
Particularité des écrans tactiles.
Attention ! Avec un écran tactile (téléphones, tablettes, ou écrans de bureau tactiles) le sélecteur :hover n'est jamais activé.
La prise en charge de :hover peut être testée avec les requêtes media queries (reportez-vous à la directive @media pour
de plus amples explications) :
@media (hover: hover) {
a:hover {
background:yellow;
}
}
@media (hover: none) {
a:active {
background:yellow;
}
}
Exemples d'utilisation de la pseudo-classe :hover.
Choix des propriétés à utiliser avec :hover.
A peu près toutes les propriétés peuvent être appliquées sur le sélecteur :hover. On préférera cependant celles qui
ne nécessitent pas un nouveau calcul de la mise en page.
La propriété border par exemple ajoute une bordure qui décale toute la suite de la page, tandis que la propriété
outline ajoute un contour qui se superpose aux éléments déjà en place, et ne nécessite donc pas de les déplacer.
Cette distinction est bien visible sur l'exemple ci-dessous.
border) -
Contour (propriété outline) -
Couleur d'arrière-plan
Amélioration de l'effet visuel avec une transition.
L'effet de transition consiste à faire varier de façon progressive la valeur d'une propriété.
Voir à ce sujet la propriété transition.
La combinaison d'une transition et du sélecteur :hover donne souvent des effets visuels intéressants.
Utilisation de :hover sur un pseudo-élément.
La pseudo-classe :hover peut être combinée avec un sélecteur du type pseudo-élément.
L'effet sera le suivant : lorsque le pointeur survole l'élément, les styles sont appliqués au pseudo-élément.
Vous pouvez tester cela sur les exemples ci-après.
:hover agit ici sur le pseudo-élément ::before.
Ici c'est la portion de texte sélectionnée qui est rendue réactive avec :hover.
Compatibilité des navigateur avec :hover.
La pseudo-classe :hover est très bien reconnue par les navigateurs.
Initialement son usage était réservé aux éléments du type a, mais elle est maintenant applicable à tous les types d'éléments,
et également aux pseudo-éléments.
:hover ciblant l'élément sur lequel se trouve la souris.:hover sur les éléments de type a.:hover sur tous les éléments.:hover sur des pseudo-éléments (comme ::before ou ::after par exemple.Remarques :
(1) Sur Safari, le fait de cliquer sur un élément cliquable fait passer l’élément à l’état :hover. L’élément restera dans l’état :hover jusqu’à ce qu’un autre élément soit entré dans l’état :hover.
(2) Sur Internet Explorer, le fait de cliquer sur un élément et de faire scroller le contenu (sans bouger le curseur) ne désactive pas :hover.
:hover:hoversur les liens
(éléments a)
:hoversur tous les
types d'éléments
:hoversur pseudo-éléments
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
Opéra Mobile
KaiOS Browser
Samsung Internet
Opéra
Safari
Safari sur IOS
Chrome
Firefox
Edge
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Historique de la pseudo-classe :hover.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernant:hover. Introduction de la pseudo-classe:hoverdans la version 2.xx de CSS.
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Sélecteurs - Niveau 3
Concernant:hover. Pas de changement concernant la pseudo-classe:hover.03 Août 1999Document de travail.
13 Novembre 2001Candidat à la recommandation.15 Décembre 2009Proposé à la recommandation.29 Septembre 2011Recommandation. -
Sélecteurs - Niveau 4
Concernant:hover. Pas de changement concernant la pseudo-classe:hover.29 Septembre 2011Document de travail.
Voir aussi...
Les pseudo-classe ci-après permettent de désigner un élément en fonction des actions de l'utilisateur : mouvements de souris, sélection d'une zone de saisie, d'un lien, etc.