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

Question

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

我现在实现的是简单的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分区。

我怎么可能在我的代码中添加这条规则？我试着做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);
    });