please help onjquery hover

Question

Hi,

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

You can do it using hover for both divs.

When hovering over div1 show div2, when hovering out of div2 hide div2.

$('#div1').hover(
function() {
 //hoverIn
 $('#div2').show(); 
}, function() {
  //hoverOut
});


$('#div2').hover(
function() {
 //hoverIn

}, function() {
  //hoverOut
  $('#div2').hide();
});

Answer 2

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();
});