0

次のような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にカーソルを合わせたときにdiv21を表示し、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リンク

4

1 に答える 1

0

学習上の理由からこれを実装する最良の方法は、javascript でオブザーバー パターンを使用することです。

オブザーバー パターン wiki

JavaScript でこれを行うチュートリアルの例を次に示します。

私の観点からは、ステータスをブロードキャストするマウスオーバー/マウスアウトで関数を起動し、そのブロードキャストにサブスクライブされた関数がdivの表示/非表示ステータスを更新できるようにする必要があります。これは、上記の質問よりもリサイクル可能です。

幸運を！

于 2014-07-21T14:36:32.383 に答える