Javascript 将div隐藏在两个div之一的鼠标外，但不能在两者之间

我目前有两个

s。将第一个鼠标悬停时，第二个应淡入。当

mouseout

ing第一个或第二个鼠标时，第二个应该会再次淡出。但是，当将鼠标从第一个移动到第二个时，第二个应该保持不变（如鼠标悬停菜单）

我现在实现的是简单的

mouseover

/

mouseout

事件处理程序：

问题在于，当鼠标从第一个div移动到第二个div时，持续显示第二个div的要求不起作用-当鼠标从第一个div移动到第二个div时，将提升第一个div的

鼠标输出

我怎么可能在代码中添加此规则？我试着做：

但是，当鼠标从第一个div移动到第二个div时，这会使第二个div淡出和淡入，而它应该保持不变，不会产生任何效果

提前感谢。
使用此代码而不是您的代码

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

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

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

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

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