Changement de position au :hover

Résolu/Fermé
Plumeex - 31 mai 2012 à 12:01
 Plumeex - 31 mai 2012 à 17:37
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.

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

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.
1
Ça marche !
Merci beaucoup, en plus j'aurais appris quelque chose.
0