javascript - マウスが複数の要素の外にあるかどうかを検出する

Question

ここでフィドルを作成しました：

そのため、マウスが青いボックスの上にある場合は、赤いボックスを青いボックスの上に配置する必要があります。ご覧のとおり動作しますが、赤いボックスが青いボックスの上にない場合は、赤いボックスを非表示にする必要もあります。

コードを次のように変更しました。

if(box.is(':hover')){
  // put red box on top
}else{
  // hide red box
}

しかし、それはうまく機能しません:s

ヒントはありますか？

score 4 · Accepted Answer

質問を正しく理解していると仮定すると、使用をやめ、代わりに、オーバーレイをトリガーする必要がある要素mousemoveに委任mouseenterおよびイベントハンドラーを使用します。mouseleave

$("body").on("mouseenter", ".Box", function () {
    // Show the overlay
}).on("mouseleave", ".Box", function () {
    // Hide the overlay
});

オーバーレイは要素の上にあるため、要素内でマウスを動かしてもうまく機能しません。これを解決するには、CSS プロパティをオーバーレイに追加します。

#over {
    /* ... */
    pointer-events: none;
}

これが実際の例です。

1 に答える 1