当两个div都为真时，在一个div的mouseleave和另一个div的mouseenter上

Question

有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上，将dev22悬停在div12上时，我想显示div 21，就像菜单应保持可单击一样。 如果我从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链接

Answer 1

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

观察者模式Wiki

这是在javascript中执行此操作的示例教程

从我的角度来看，您将需要在鼠标悬停/鼠标悬停时触发一个广播状态的功能，然后预订该广播的功能可以更新div的显示/隐藏状态。 这也比上面问题中的内容更可回收。

祝好运！