:hover CSS sélecteur

Définition de la CSS :hover.

La pseudo-classe d'action CSS :hover permet d'assigner des propriétés CSS à un élément HTML et à ses fils durant le moment où il est survolé par le curseur (souris).
La pseudo-classe :hover CSS est utilisée entre autre pour les liens (balise ).

Exemple de syntaxe CSS :hover :
:hover{
  /* propriétés Css pour tous les éléments survolés */ 
}
identifiant:hover{
  /* propriétés Css pour élément survolé */ 
}
identifiant:hover a{
  /* propriétés Css pour les fils de type A de l'élément survolé */ 
}

La pseudo-classe CSS :hover est associée généralement aux pseudo-classes suivantes CSS quand on parle de lien () :

  • : quand lien a été visité.
  • : quandle lien est cliqué.
  • : quand le lien a le focus,
  • : lien normal et non visité.
Pseudo-classes à utiliser pour charter un lien :
a:link{}
a:visited{}
a:hover{}
a:focus{}
a:active{}
/* L'ordre de déclaration des états doit être respecté, c'est celui du W3C */
/* Voir aussi le chapitre sur le déclenchement et l'héritage des états activés */

Conditions d'application de la CSS :hover.

La pseudo-classe CSS :hover est applicable sur toutes les balises HTML ou XHTML.

Problème d'interprétation de :hover en Css.

La pseudo-classe CSS :hover ne marche pas sur Internet Explorer =< 6 si la feuille de style :hover est associée à une autre balise HTML ou XHTML que A, fonctionne avec la version 7.

Conditions d'animation de :hover en CSS3.

La pseudo-classe CSS :hover est un moyen pour déclencher une animation Css ou déclencher une transition Css.

Règles de syntaxes CSS pour :hover.

Info complémentaire sur :hover

Attention, la pseudo-classe :hover CSS a une écriture un peu spéciale, "hover" est toujours précédée de ":".

La pseudo-classe :hover ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE", mais dans un balise HTML ou XHTML ou dans une feuille de style externe.

Exemple d'écriture CSS :hover dans une balise STYLE
<STYLE>
a:hover {}
</STYLE>

Attention à l'écriture de :hover

Si anciennement la pseudo-classe CSS :hover ne concernait que les liens, aujourd'hui ce n'est plus le cas. Il est donc nécessaire de mettre un sélecteur devant, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML.

Dans le cas ci-dessous, l'identifiant est collé à ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML qui ont "identifiant".

Code CSS :
.identifiant:hover{ /* Propriétés css */ }
#identifiant:hover{ /* Propriétés css */ }

Dans le cas ci-dessous, l'identifiant est espacé de ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML dont le parent direct ou indirect est "identifiant".

Exemple de code :
.identifiant :hover{ /* Propriétés css */ } #identifiant :hover{ /* Propriétés css */ }

Compatibilités navigateurs du sélecteur :hover

Equivalence de la CSS :hover en HTML.

La pseudo-classe feuille de style :hover CSS n'a pas d'équivalence en HTML.

Exemples et astuces CSS pour utiliser :hover

Effet de rollover sur une image

Vous pouvez en grâce à la feuille de style css "hover" faire un effet de rollover sur un bloc sans passer par le javascript.
Je trouve cependant que le résultat n'est pas très fluide.

Le code Css :
#dmcbloc img {display: none;}
#dmcbloc{
  display: block;
  width:75px;
  height:24px;
  background-image:url(/img/exemple/bouton.gif);
}
#dmcbloc:hover {
  background-image:url(/img/exemple/boutonb.gif);
}

Le code HTML :
<a href="#" id="dmcbloc">
  <img src="/img/exemple/boutonb.gif" width="75" height="24">
</a>

Je mets dans le lien, l'image du rollOver car sinon le rollover ne sera pas fluide. Car l'image "boutonb.gif" n'est pas préchargée.
Résultat :

Vous pouvez comparer avec le même effet mais en javascript Cours javascript : Images

Cependant un bug de chargement entraine un scintillement sous Internet Explorer 5+ et < 7 la solution :
Mettre le rollover dans la même image.

Le code Css :
#dmcbloc img {display: none;}
#dmcblocc{
  display: block;
  width:75px;
  height:24px;
  background-image:url(/img/exemple/boutonc.gif);
}
#dmcblocc:link{
  background-position: 0 0;
}
#dmcblocc:hover {
  background-position: -75px 0;
}

Le code HTML :
<a href="#" id="dmcblocc">
  <img src="/img/exemple/bouton.gif" width="75" height="24">
</a>

Résultat :

Votre avis sur la définition :hover en CSS

Votez pour la définition CSS :hover

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/hover-css-selector.html Votes: 3.8 / 5 - 86 votes
Cliquez sur une étoile pour voter.