javascript - 当鼠标悬停两个 div 时隐藏一个 div，但如果悬停一个或另一个则不

Question

我有两个 div 有两个 id ：

<div id="somediv">
many Content
</div>
<div id="result></div>

我想做这样的东西：

$("#somediv").bind("mouseleave",function(){
$('#result').fadeOut();
});
$("#result").bind("mouseleave",function(){
$('#result').fadeOut();
});

但是，如果将鼠标移到另一个 div 上，我不希望结果消失。有没有办法说：当鼠标悬停两个div时隐藏一个div，但如果你悬停一个或另一个则不是？div 没有完全叠加在页面中。但他们有一个公共区域。

有任何想法吗？

Answer 1

尝试：

$("#somediv,#result").mouseenter(function(){
    $('#result').stop().fadeOut();
}).mouseleave(function(){
    $('#result').stop().fadeIn();
});

您可以做的另一件事是用另一个 div 包装两个 div，例如：

<div id="container">
    <div id="somediv">
        Many Content
    </div>
    <div id="result"></div>
</div>

并在父级上设置事件：

$('#container').mouseenter(function(){
    $('#result').stop().fadeIn();
}).mouseleave(function(){
    $('#result').stop().fadeOut();
});