Javascript 如果鼠标位于第一个或第二个div上，则保持第二个div可见

有两个分区；分区A显示：默认无，分区B始终可见。如果鼠标移动到Div B上，Div A就可见了，那怎么办呢。如果鼠标光标位于Div A或Div B上，则Div A应保持可见，否则应隐藏Div A

我正在为此使用jQuery插件hoverIntent

$(".the-dropdown").hoverIntent( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

$(".menu-item").hoverIntent( function(){
    $(".the-dropdown").show();
}, function(){
    $(".the-dropdown").hide();
});

---

嗯，试试这样的

HTML:

JS:

或者在您的具体情况下：

$(".the-dropdown, .menu-item").hover( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

---

嗯，试试这样的

HTML:

JS:

或者在您的具体情况下：

$(".the-dropdown, .menu-item").hover( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

hoverIntent是一个插件，它尝试确定用户的 意图就像一个水晶球，只能用鼠标移动！这是相似的 到jQuery的hover方法。但是，与其叫handlerIn 立即运行，hoverIntent将等待用户的鼠标变慢 在打电话之前，请记下足够的信息

为什么?？延迟或防止意外触发动画或ajax 电话。简单的超时适用于小区域，但如果您的目标区域 如果规模较大，则无论意图如何，都可以执行。这就是我想要的 进来

如果您想使用hoverIntent插件，可以在此处下载：

hoverIntent是一个插件，它尝试确定用户的 意图就像一个水晶球，只能用鼠标移动！这是相似的 到jQuery的hover方法。但是，与其叫handlerIn 立即运行，hoverIntent将等待用户的鼠标变慢 在打电话之前，请记下足够的信息

为什么?？延迟或防止意外触发动画或ajax 电话。简单的超时适用于小区域，但如果您的目标区域 如果规模较大，则无论意图如何，都可以执行。这就是我想要的 进来

如果您想使用hoverIntent插件，可以在此处下载：

---

尝试悬停而不是悬停，因为运气不好。它仍然会立即消失，它起作用了。我只是没试好。取消我的第一条评论。尝试用鼠标悬停代替鼠标悬停。运气不好。它仍然会立即消失，它起作用了。我只是没试好。取消我的第一条评论。这是我提出的第一个解决方案，但我使用的是hoverIntent。为什么我第一次没用这个？我想我需要一些睡眠。感谢您的快速回复和快速编辑。非常感谢。@chad fyi hoverIntent是一个非常有用的小插件，它是我提出的第一个解决方案，但我使用的是hoverIntent。为什么我第一次没用这个？我想我需要一些睡眠。感谢您的快速回复和快速编辑。非常感谢。@chad fyi hoverIntent是一个非常有用的小插件，感谢您的解释。问题已经解决了，但是，您给出的示例不符合我的要求。当您将光标移动到蓝色上方时，将显示红色。当您将光标从蓝色直接移动到红色时，红色应保持不变，且不应上下滑动。谢谢你的努力。我真的很感激。谢谢你的解释。问题已经解决了，但是，您给出的示例不符合我的要求。当您将光标移动到蓝色上方时，将显示红色。当您将光标从蓝色直接移动到红色时，红色应保持不变，且不应上下滑动。谢谢你的努力。我真的很感激。

$('#a, #b').hover(function() {
    $('#a').show(); 
}, function() {
    $('#a').hide();    
});

$(".the-dropdown, .menu-item").hover( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

$(".menu-item").hoverIntent({
    over: function () {
        $(".the-dropdown").slideDown();
    },
    out: function () {
        $(".the-dropdown").slideUp();
    },
    timeout: 500,
    interval: 500
});

<div class="menu-item">Hover this for half a second
    <div class="the-dropdown"></div>
</div>

div {
    height: 200px;
    width: 200px;
}
.the-dropdown {
    background: red;
    display: none;
    position:relative;
    top:182px;
}
.menu-item {
    background: blue;
}