Changement de position au :hover
Résolu
Plumeex
-
Plumeex -
Plumeex -
Bonjour,
Je souhaite mettre sur mon site une image fixed à gauche de l'écran, qui au passage de la souris se déroulerait pour afficher du contenu.
J'ai créé une div avec ce contenu (175px de large) et une image à droite, et je l'ai mise à left=-175px, ainsi on ne voit que l'image.
Dans mon CSS, j'ai mis l'id de la div et :hover, avec left=0px. en toute logique, la div devrait donc se déplacer à 0px et afficher le contenu, non ?
Sauf qu'au passage de la souris, seul le background change, la div ne change pas de position...
Ai-je commis une ou plusieurs erreurs dans mes codes ?
Merci d'avance.
Je souhaite mettre sur mon site une image fixed à gauche de l'écran, qui au passage de la souris se déroulerait pour afficher du contenu.
J'ai créé une div avec ce contenu (175px de large) et une image à droite, et je l'ai mise à left=-175px, ainsi on ne voit que l'image.
<div id="statut" style="position: fixed; top: 200px; left: -175px;">
MON CONTENU HTML <img src="http://image.noelshack.com/fichiers/2012/22/1338395105-Ban.png">
</div>
Dans mon CSS, j'ai mis l'id de la div et :hover, avec left=0px. en toute logique, la div devrait donc se déplacer à 0px et afficher le contenu, non ?
#statut:hover {
background: #808080;
left:0px;
}
Sauf qu'au passage de la souris, seul le background change, la div ne change pas de position...
Ai-je commis une ou plusieurs erreurs dans mes codes ?
Merci d'avance.
A voir également:
- Changement de position au :hover
- Changer de dns - Guide
- Ma position - Guide
- Suivi position google - Guide
- Changement d'heure - Guide
- Changement d'écriture facebook - Guide
2 réponses
Les règles CSS s'appliquent par ordre de priorité, du plus précis au moins précis.
Un style 'inline' (=déclaré avec l'attribut style="...") est prioritaire sur toutes les autres règles.
#statut {
left: -175px;
}
#statut:hover {
background: #808080;
left:0px;
}
"#statut:hover" étant plus précis que "#statut", la nouvelle règle prendra le dessus.
Un style 'inline' (=déclaré avec l'attribut style="...") est prioritaire sur toutes les autres règles.
#statut {
left: -175px;
}
#statut:hover {
background: #808080;
left:0px;
}
"#statut:hover" étant plus précis que "#statut", la nouvelle règle prendra le dessus.