: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 -
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
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
- Le logiciel fortinet n'a pas été installé correctement - Forum Virus
- La page n’est pas redirigée correctement Mozilla Firefox depuis google.drive.com - Forum Mozilla Firefox
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>
