:hover ne fonctionne pas correctement
Résolu
Bonjour à tous,
je code aujourd'hui un site web, et il m'arrive un problème...
Je voudrais afficher un <div> au passage de la souris sur un autre <div>, et j'ai trouvé quelques propositions sur le web ne fonctionnant malheureusement pas.
Code HTML :
<div id="contentNav">
<img id="menuIcone" src="img/menu/site-temp1.png">
</div>
<div id="menu">
<p> MENU </p>
</div>
et mon code CSS :
#menu {
display: none;
}
#contentNav {
background-color: #777777;
width:3%;
position: fixed;
height: 100%;
}
#contentNav:hover #menu {
display: block;
}
J'ai déjà vérifié, le menu est bien positionné sur la page quand on le réaffiche via le CSS, et mettre body à la place de #contenu fonctionne alors que là, rien.
Merci à tous
je code aujourd'hui un site web, et il m'arrive un problème...
Je voudrais afficher un <div> au passage de la souris sur un autre <div>, et j'ai trouvé quelques propositions sur le web ne fonctionnant malheureusement pas.
Code HTML :
<div id="contentNav">
<img id="menuIcone" src="img/menu/site-temp1.png">
</div>
<div id="menu">
<p> MENU </p>
</div>
et mon code CSS :
#menu {
display: none;
}
#contentNav {
background-color: #777777;
width:3%;
position: fixed;
height: 100%;
}
#contentNav:hover #menu {
display: block;
}
J'ai déjà vérifié, le menu est bien positionné sur la page quand on le réaffiche via le CSS, et mettre body à la place de #contenu fonctionne alors que là, rien.
Merci à tous
3 réponses
-
Merci à tous les deux, je ne connaissais pas la notation en CSS et aurait appris du JS.
Cordialement -
salut
Sinon si il n'y a aucune relation parent enfant frere entre 2 div tu peux utiliser javascript ou plus simple jquery
exemple en jquery (ne pas oublier d'inserer la biblothèque jquery dans le head)
<script>
$(document).ready(function(){
$("#contentNav").mouseover(function(){
$("#menu").css("display","block");});
$("#contentNav").mouseout(function(){
$("#menu").css("display","none");});
})
</script> -
Normal car #contentNav:hover #menu c'est si tu as ce cas:
<div id="contentNav"> <img id="menuIcone" src="img/menu/site-temp1.png"> <div id="menu"> <p> MENU </p> </div> </div>
Ce qui te faut c'est plutôt cette notation #contentNav:hover + #menu
Fait un tour ici pour comprendre:
https://www.w3schools.com/css/css_combinators.asp
