Question

I want to do this:

If mouse is NOT on element1 AND element2, then do this

I have a sliding menu. If the user mouseout of the menu area, the menu must close itself. The menu area is made up 2 separate elements : the title of menu and menu area, positioned beneath the menu.

I already found out how to mouseout the menu area.

$('#menu_area').bind('mouseout', function() {

    $(this).slideUp(1000);

    });

Now i want to do both: mouseout on menuarea AND menu titles.

Now the problem is that if i hover on menu titles, the menu area close itself and i don’t want it do it.

Answer 1

Add a parent div or any other container for menu title and menu area. Write mouseout/mouseleave event for the parent control.

Second approach is (this may not be clean)

1. Write mouseenter event for title and menu controls. Try setting gloabl variables like ‘mouseOnTitle” or “mouseOnMenu” to true.
2. Write mouseleave event and set the above global variables to falise. Use dleay to wait for few milliseconds and chek whether any of the global variable is true. If both are false, hide the menu