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

Question

I searched already and somehow I didn\'t find a matching question .. o.O

Now, i got two divs, \"div 1\" and the other one is hidden (\"submenu\"). Now if I hover ove

Answer 1

The trick requires two things:

1. A parent div that wraps both the initial menu (div 1) and the second menu (submenu)
2. Use the .mouseleave() method, NOT .mouseout() -- and bind this to the parent div mentioned in #1

jsFiddle example

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.

Answer 2

If you don't want animation, you can do it without JavaScript with the :hover selector like this.