當兩個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的顯示/隱藏狀態。 這也比上面問題中的內容更可回收。

祝好運！