:hover ne fonctionne pas correctement

Résolu/Fermé

BioK03 Messages postés 655 Date d'inscription mardi 15 avril 2014 Statut Membre Dernière intervention 24 décembre 2016 - 28 juil. 2014 à 19:07
BioK03 Messages postés 655 Date d'inscription mardi 15 avril 2014 Statut Membre Dernière intervention 24 décembre 2016 - 6 août 2014 à 20:45

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

A voir également:

3 réponses

Réponse 1 / 3

Utilisateur anonyme
Modifié par ZeNairolf99 le 5/08/2014 à 17:37

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

Réponse 2 / 3

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
5 août 2014 à 18:08

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>

Réponse 3 / 3

BioK03 Messages postés 655 Date d'inscription mardi 15 avril 2014 Statut Membre Dernière intervention 24 décembre 2016 130
6 août 2014 à 20:45

Merci à tous les deux, je ne connaissais pas la notation en CSS et aurait appris du JS.

Cordialement

Discussions similaires

probleme fortiguard ou fortinet

probleme firefox la page n'est pas redirigée correctement

Un cable réseau n'est pas branché correctement ou est endommagé

exo pix

Utilisation des méthodes de manipulations du DOM

Discussions similaires

Newsletters