jQuery: Mousover on a div open submenu which should stay open when mouseout

The trick requires two things:

A parent div that wraps both the initial menu (div 1) and the second menu (submenu)
Use the .mouseleave() method, NOT .mouseout() -- and bind this to the parent div mentioned in #1
jsFiddle example
http://jsfiddle.net/ebiewener/4cYzN/1/

You don't want to use mouseout(), because that will fire as soon as the cursor goes over the second menu, since this essentially "blocks" it from being over the parent div. mouseleave(), on the other hand, will only fire once the cursor is no longer over either the parent div, or any of it's children.

share|edit|flag
answered Aug 16 '11 at 22:29

maxedison

.menuWrapper {background:gray; padding:5px; width:70px}
.menuWrapper div {height:100px; width:70px}
.menu1 {background:red}
.menu2 {background:blue; display:none}

$('.menu1').mouseover(function(){
$('.menu2').show();
});

$('.menuWrapper').mouseleave(function(){
$('.menu2').hide();
});