Jquery onmouseover show outside div and hide on mouseleave

0
votes

I am new with Jquery.

I am trying to show and hide ousider div on mouserover and mouseleave.

Its working fine as mouserover and mouseleave but dont want to hide div if i hover on same div.

What trick i have to use so div is not to be hide on mouseleave on the same div.

any working link ?? so i can get any help ?

I have tryied this simple,

fiddle Link

HTML/css:

<div id="hover-me">Hover Me </div>
<div class="show-me">
    show this div
</div>

.show-me {
   display : none; 
   width:100%;
    background:black;
    color:#fff;
}

Jquery:

$("#hover-me").mouseenter(function() {
    $(".show-me").slideDown();
});
$("#hover-me").mouseleave(function() {
    $(".show-me").slideUp();
});
2
jquery

2 Answers

0
votes

Try this out:- http://jsfiddle.net/adiioo7/Zcsg8/1/

Keep the hidden div inside the parent div.

HTML:-

<div id="hover-me">Hover Me
    <div class="show-me">show this div</div>
</div>
0
votes
<div id="hover-me">Hover Me 
   <div class="show-me">
      show this div
   </div>
</div>

Put the #show-me div inside #hover-me div.