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 over div 1, the submenu appears just next to the div, which is correct. But if I move my mouse to the submenu, it disappears.

It’s because I got a hover trigger on div 1.

If I split in into mouson and mouseout, is it somehow possible to say ‘submenu must be closed when mouseout, but ONLY if the cursor is not on the submenu’?

Thanks for help!

Flo

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.