javascript - 在两个 div 之一的鼠标移出时隐藏 div，但不在两者之间

Question

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

我现在实现的是简单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 的要求不起作用 - 当将鼠标从第一个 div 移动到第二个 div 时，会提高mouseout第一个 div 的值。

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

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

但这会使第二个 div 在将鼠标从第一个 div 移动到第二个 div 时淡出并淡入，而它应该保持没有任何影响。

提前致谢。

Answer 1

使用此代码而不是您的代码

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

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