在两个div之一的mouseout上隐藏div，但不在

Question

之间我目前有两个<div> s。当第一个悬停时，第二个应该淡入。当第一个或第二个第一个或第二个时，第二个应该再次淡出。但是，将鼠标从第一个移动到第二个时，第二个应该保持（如鼠标悬停菜单）。

我现在实现的很简单mouseover/mouseout事件处理程序：http://jsfiddle.net/tC3ZL/2/。

$('#div1').mouseover(function() { 
    $('#div2').fadeIn(500); 
}); 

$('#div1').mouseout(function() { 
    $('#div2').fadeOut(500); 
}); 

$('#div2').hide().mouseout(function() { 
    $('#div2').fadeOut(500); 
}); 

的问题是出在第二个div坚持从第一移动鼠标到第二个div时的要求是不工作 - 从第一移动鼠标时的第二个div将提高mouseout的第一个分区。

我怎么可能在我的代码中添加此规则？我试着只是做http://jsfiddle.net/tC3ZL/1/：

$('#div2').mouseover(function() { 
    $('#div2').fadeIn(500); 
}); 

但是这使得第二个div淡出和褪色从第一鼠标移动到第二个div时，而应该仅仅停留无任何影响。

在此先感谢。

Answer 1

使用此代码代替您的代码

$('#div1').mouseover(function() { 
     $('#div2').stop(); 
     $('#div2').fadeIn(500); 
    }); 

    $('#div2').hide().mouseout(function() { 
     $('#div2').fadeOut(500); 
    });