CODEWITHSUNDEEP
jqueryhtmlhoverhideshow
A.Noot
A.Noot

Reputation: 49

jQuery show on hover, hide when mouse moves away

I have a div that I want to work similarly to a hamburger menu. When mouse hovers over #Nnav, .dd should appear and then disappear again when unhovering. I don't know what is missing, but the div is always visible (tried hiding it with CSS and then it always remained hidden). Here is my code so far:

HTML:

<div id="menu">
 <img class="Nmenu" id="Nnav" src="images/nav.png">
  <div class="Nmenu" id="dd">
   <div class="Nmenu" id="dropdown"></div>
    <a class="Nmenu buttons" id="B1" href="#">Page 1</a>
    <a class="Nmenu buttons" id="B2" href="#">Page 2</a>
    <a class="Nmenu buttons" id="B3" href="#">Page 3</a>
 </div> </div>

CSS:

#dd {display: none;}

jQuery:

$("#Nnav").on({
mouseover: function() {
    $("#dd").stop().show();
},
mouseout: function() {
    $("#dd").stop().hide();
} })

Upvotes: 1

Views: 1792

Answers (4)

Charith Lakshan Wickramasinghe
Charith Lakshan Wickramasinghe

Reputation: 22

I think the issue is with the css. dd is not a class it is an id. It should be #dd {display: none;} not .dd {display: none;}

Upvotes: 0

ii iml0sto1
ii iml0sto1

Reputation: 1742

Hi if you want to do it with jQuery you can just toggle the class on/off

$("#Nnav").on({
    mouseover: function() {
            $("#dd").toggleClass('dd');
    },
    mouseout: function() {
            $("#dd").toggleClass('dd');
    }
})

Fiddle

Upvotes: 1

isherwood
isherwood

Reputation: 61063

#dd {
    display: none;
}
#Nnav:hover + #dd {
    display: block;
}
<div id="menu">
    <img class="Nmenu" id="Nnav" src="https://via.placeholder.com/50">
    
    <div class="Nmenu" id="dd">
        <div class="Nmenu" id="dropdown"></div>
        <a class="Nmenu buttons" id="B1" href="#">Page 1</a>
        <a class="Nmenu buttons" id="B2" href="#">Page 2</a>
        <a class="Nmenu buttons" id="B3" href="#">Page 3</a>
    </div>
</div>

This isn't going to work as a menu toggler, though, since the menu disappears once you're off the image. You'd need the menu to be a child element:

#dd {
    display: none;
}

#Nnav {
    display: inline-block;
}

#Nnav:hover #dd {
    display: block;
}
<div id="Nnav">
    <img class="Nmenu" src="https://via.placeholder.com/50">

    <div class="Nmenu" id="dd">
        <div class="Nmenu" id="dropdown"></div>
        <a class="Nmenu buttons" id="B1" href="#">Page 1</a>
        <a class="Nmenu buttons" id="B2" href="#">Page 2</a>
        <a class="Nmenu buttons" id="B3" href="#">Page 3</a>
    </div>
</div>

Upvotes: 2

sifat kabir
sifat kabir

Reputation: 64

CSS selector is wrong. You need # when selecting element with id

#dd {
  display: none;
}

Upvotes: 0

Related Questions