:hover ne fonctionne pas correctement
Résolu
BioK03
Messages postés
801
Statut
Membre
-
BioK03 Messages postés 801 Statut Membre -
BioK03 Messages postés 801 Statut Membre -
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
A voir également:
- :hover ne fonctionne pas correctement
- Votre appareil ne dispose pas des correctifs de qualité et de sécurité importants - Guide
- La page n’est pas redirigée correctement ✓ - Forum Mozilla Firefox
- La fenetre actuelle est trop petite pour afficher correctement cette feuille - Forum Google Docs
- Clémence souhaite faire calculer automatiquement les prix de 30 produits dans trois devises. elle a déjà saisi une formule de calcul pour le tarif du premier produit dans la première devise. corrigez sa formule afin que recopiée vers le bas puis vers la droite, elle remplisse correctement tout le tableau. - Forum Excel
- Document word ne s'affiche pas correctement - Forum Word
3 réponses
Normal car #contentNav:hover #menu c'est si tu as ce cas:
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
<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
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)
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>
