ZONE CSS
Information accessibilité
Définition de la css hover
Définition de hover
La pseudo-classe de feuille de style css :hover permet de spécifier toutes les propriétés liées à la fonte, et à la décoration de texte (gras, souligné, ...), arrière plan, ... d'un élement survolé par le curseur (souris).
La pseudo-classe de feuille de style :hover css est utilisée entre autre pour les liens (balise A) par exemple.
a:hover{
/* propriétés css */
}
identifiant:hover{
/* propriétés css */
}
</STYLE>
La pseudo-classe de feuille de style :hover css ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE, mais dans une balise HTML ou XHTML STYLE ou dans une feuille de style externe.
La pseudo-classe de feuille de style :hover css est utilisée entre autre pour les liens (balise A) par exemple.
Exemple de code :
<STYLE>a:hover{
/* propriétés css */
}
identifiant:hover{
/* propriétés css */
}
</STYLE>
La pseudo-classe de feuille de style :hover css ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE, mais dans une balise HTML ou XHTML STYLE ou dans une feuille de style externe.
La pseudo-classe de feuille de style :hover css est applicable sur toutes les balises HTML ou XHTML.
La pseudo-classe de feuille de style :hover n'a pas d'équivalence en HTML.
La pseudo-classe de feuille de style 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.
FAQ
Répond aux questions suivantes :
Comment changer ou spécifier la couleur, la fonte, le fond d'un lien lorque le curseur ou souris est dessus ou le survole?
Liste des questions les plus fréquemment posées en css.
Liste des questions les plus fréquemment posées en css.
Exemples et astuces css
Info complémentaire.
Attention, le pseudo-élément de feuille de style :hover a une écriture un peu spéciale.
"hover" est toujours précédé de ":".
Il ne peut pas être déclaré dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE, mais dans un balise HTML ou XHTML STYLE.
a:hover {}
</STYLE>
Vous pouvez aussi lui assigner un identifiant :
Le pseudo-élément de feuille de style :hover est associé aux feuilles de style css :
a:visited{}
a:link{}
"hover" est toujours précédé de ":".
Exemple de code :
A:hover{}Il ne peut pas être déclaré dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE, mais dans un balise HTML ou XHTML STYLE.
Exemple de code :
<STYLE>a:hover {}
</STYLE>
Vous pouvez aussi lui assigner un identifiant :
Exemple de code :
a.identifiant:hover {}Le pseudo-élément de feuille de style :hover est associé aux feuilles de style css :
Exemple de code :
a:active{}a:visited{}
a:link{}
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.
Code Css :
#dmcbloc{
display: block;
width:75px;
height:24px;
background-image:url(../images/exemple/bouton.gif);
}
#dmcbloc:hover {
background-image:url(../images/exemple/boutonb.gif);
}
Code HTML :
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.
Code Css :
#dmcblocc{
display: block;
width:75px;
height:24px;
background-image:url(../images/exemple/boutonc.gif);
}
#dmcblocc:link{
background-position: 0 0;
}
#dmcblocc:hover {
background-position: -75px 0;
}
Code HTML :
Résultat :
Je trouve cependant que le résultat n'est pas très fluide.
Code Css :
Exemple de code :
#dmcbloc img {display: none;}#dmcbloc{
display: block;
width:75px;
height:24px;
background-image:url(../images/exemple/bouton.gif);
}
#dmcbloc:hover {
background-image:url(../images/exemple/boutonb.gif);
}
Exemple de code :
<a href="#" id="dmcbloc"><img src="../images/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.
Code Css :
Exemple de code :
#dmcbloc img {display: none;}#dmcblocc{
display: block;
width:75px;
height:24px;
background-image:url(../images/exemple/boutonc.gif);
}
#dmcblocc:link{
background-position: 0 0;
}
#dmcblocc:hover {
background-position: -75px 0;
}
Exemple de code :
<a href="#" id="dmcblocc"><img src="../images/exemple/bouton.gif" width="75" height="24" /></a>Résultat :
BUG INTERNAUTE
Explication
Vous trouverez ci-dessous divers bugs d'interprétation de la css hover.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.
Ces bugs ont été transmis par les internautes du site.
J'ai vérifié certains bugs mais pour la plupart, ils sont soit sur MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui.
VOTRE AVIS
Notez cette page
- 1/5
- 2/5
- 3/5
- 4/5
- 5/5
Votes: 4.3 /
5 - 3
votes
Cliquez sur une étoile pour voter.
Cliquez sur une étoile pour voter.