Search code examples
javascriptmenuhoveronmouseout

Unexpected behaviour of 'onmouseout' in a "hover menu"

I'm trying to create a 'hover menu' - you hover the mouse over a title and then a menu box appears below it - I want it to disappear when you move the mouse outside of it.

look: http://jsfiddle.net/kzJ8y/

Hover over 'STUFF' - the menu box appears below. Now start moving the mouse cursor slowly on it - down - once you pass the first item - it disappears! This is not the desired action.
Clearly, my onmouseout definition is on the #menuStuff div - and you can clearly see with Firebug its dimensions - that it takes the width and height of the entire list -
so.... why does it fire after moving down from the first list item? The cursor is still inside the bounds of the div - what's going on here?

Solution

  • Instead of onmouseout use onmouseleave:

    <div id="menuStuff" class="hover-menu" onmouseleave="$('#menuStuff').hide();" >

    jsfiddle -> http://jsfiddle.net/kzJ8y/1/