当两个条件都为真时，一个 div 的 mouseleave 和另一个 div 的 mouseenter

Posted 2023-02-17

【中文标题】当两个条件都为真时，一个 div 的 mouseleave 和另一个 div 的 mouseenter

【英文标题】：On mouseleave of one div AND mouseenter of other div when both condition true

【发布时间】：2014-07-21 14:26:53

【问题描述】：

有 4 个 div，如下所示

<style>
    .displayNoneIcon 
        display: none;
    
</style>

<div id="div1" style="float: left">
    <div id="div11">hello</div>
    <div id="div12">hi</div>
</div>
<div id="div2" style="float: right">
    <div id="div21" class="displayNoneIcon"><a href="#">bye</a></div>
    <div id="div22" class="displayNoneIcon"><a href="#">see ya</a></div>
</div>

当我悬停在 div11 上时，我想显示 div 21，在 div12 上悬停时显示 dev22，就像菜单一样，它应该保持并可点击。如果我从 div11 移出，则 div21 必须隐藏，除非用户进入 div21。目前，如果我将指针从 div11 移向 div21，它就会隐藏起来。我希望它留下来。 两者都必须像上面一样位于单独的 div 中。

我尝试了 mouseenter 和 mouseleave，但它没有满足我的要求。请帮我解决这个问题。

$( "body" ).on( "mouseenter", "#div11", function(event) 
    $( "#div21" ).removeClass( "displayNoneIcon" );
);
$( "body" ).on( "mouseleave", "#div11", function(event) 
    $( "#div21" ).addClass( "displayNoneIcon" );
);
$( "body" ).on( "mouseenter", "#div12", function(event) 
    $( "#div22" ).removeClass( "displayNoneIcon" );
);
$( "body" ).on( "mouseleave", "#div12", function(event) 
    $( "#div22" ).addClass( "displayNoneIcon" );
);

提前致谢。 jsfiddle链接

【问题讨论】：

我不明白你的问题。您的代码 (JS Fiddle) 似乎符合您的描述。你能解释得更好吗？

正如@blex 所说，它工作得很好。

.show() 和 .hide() 与使用 display:none; 添加和删除类相同；

确实如此。你能发布一个工作错误的 jsFiddle 吗？

this JS Fiddle 在做你想做的事吗？ （有一个容器。如果你离开这个容器，它会隐藏所有东西。如果没有，它会保持最后一个悬停元素的相关 div 显示）

【参考方案1】：

出于学习原因，实现这一点的最佳方法是在 javascript 中使用观察者模式。

Observer pattern wiki

Here is an example tutorial doing this in javascript

从我的角度来看，您将希望在鼠标悬停/鼠标移出时触发一个广播状态的函数，然后订阅该广播的函数可以更新 div 的显示/隐藏状态。 这也比您在上面的问题中更可回收。

祝你好运！