JQuery - mouseover / mouseout with multiple divs

Question

I have a hidden div nested in a large div and set it, so when you hover over a larger div, the hidden div shifts down. When you mouse out, the div goes back. The problem is that when the mouse moves to a smaller div, it tries to shift it back because the mouseout event was raised. How can I prevent the div from hiding again until the mouse ends in a div?

HTML:

<div id="topbarVis" class="col1 spanall height1 wrapper"> <div id="topbar"></div> </div> 

(additional classes are part of the modular css system and determine, among other things, the width and height of #topbarVis

CSS

 #topbar { width: 100%; height: 30px; margin-top: -25px; background-color: #000; } 

JS:

 // On Mouseover -> Show $("#topbarVis").mouseover(function(){ $("#topbar").animate({marginTop:0}, 300); }); // On Mouseout -> Hide $("#topbarVis").mouseout(function(){ $("#topbar").animate({marginTop:-25}, 300); }); 

Answer 1

Use mouseenter/mouseleave :

 $("#topbarVis").mouseenter(function(){ $("#topbar").animate({marginTop:0}, 300); }) .mouseleave(function(){ $("#topbar").animate({marginTop:-25}, 300); }); 

... or just use the hover() ^(docs) method which is a shortcut for mouseenter/mouseleave :

 $("#topbarVis").hover(function(){ $("#topbar").animate({marginTop:0}, 300); },function(){ $("#topbar").animate({marginTop:-25}, 300); }); 

The reason is that the nature of the mouseover/mouseout is such that it bubbles. Therefore, it will fire when any descendants of the element receive events. While mouseenter/mouseleave does not bubble.

The only browser that actually supports custom mouseenter/mouseleave events is IE, but jQuery replicates its behavior.

Answer 2

This works for me in IE. Hope this helps.

 $("#topbarVis").hover(function(){ $("#topbar").animate({height:"100%"}, 300); },function(){ $("#topbar").animate({height:"0%"}, 300); }); 

Using this as CSS.

 #topbar { width: 100%; height:0px; background-color: #000; }