:hover CSS sélecteur

: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é */ 
}

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 */

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 STYLE ou dans une feuille de style externe.

<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".

.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".

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.

#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);
}

<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.

#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;
}

<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