Question

I have two divs. Say div1 and div2. By default div2 is invisible.

When the user hovers over div1, I need to display div2. Now if the div2 is hovered then i need to keep displaying this div2 (even if div1 is no longer hovered), otherwise reset the div2’s visibility to hidden.

How do I keep div2 visible while hovered?

Answer 1

Here you go:

var overSubmenuFlag = false;
$('#div1').mouseover(function(){
    $('#div2').show();
});
$('#div1').mouseout(function(){
    setTimeout(function(){if(overSubmenuFlag)return;$('#div2').hide();},100);
});
$('#div2').mouseover(function(){
    overSubmenuFlag = true;
});
$('#div2').mouseout(function(){
    overSubmenuFlag = false;
    $('#div2').hide();
});