:hover ne fonctionne pas correctement

Résolu
BioK03 Messages postés 655 Date d'inscription   Statut Membre Dernière intervention   -  
BioK03 Messages postés 655 Date d'inscription   Statut Membre Dernière intervention   -
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

3 réponses

Utilisateur anonyme
 
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
1
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
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>
0
BioK03 Messages postés 655 Date d'inscription   Statut Membre Dernière intervention   134
 
Merci à tous les deux, je ne connaissais pas la notation en CSS et aurait appris du JS.


Cordialement
0