javascript - マウスアウトは新しいdivを検出しますか?

Question

divにマウスオーバーすると、いくつかのことを行い、そのdivの横にモーダルウィンドウを配置します。マウスを離すと、モーダルを非表示にする必要があります。問題は、マウスをモーダルに移動すると、元のdivにマウスを合わせなくなったため、モーダルが消えてしまうことです。

mouseout イベントでマウスオーバーしている div を検出する方法はありますか? モーダル div を非表示にしない最もクリーンな方法は何ですか?

Answer 1

モーダル ウィンドウを「mouseovered」div 内に配置してみてください。

それはトリックを行う必要があります

---

編集：

モーダルウィンドウを内部に配置できないため、「トリッキー」なことを試すことができます。

var timerFade;
$(function(){
    $(".element").mouseout(function(){
        timerFade = setTimeout(500,function(){
            // make the modal disappear
        });
    });
    $("#modalWindow").mouseover(function(){
        clearTimeout(timerFade);
    });
    $(".element").mouseover(function(){
        timerFade = setTimeout(500,function(){
            clearTimeout(timerFade);
        });
        // if modal is hidden, show it or move from another
            // element whith same behavior
    });

});

オーバーしたいdivにクラス「要素」があり、モーダルウィンドウにid「modalWindow」があると仮定します。

これは、設定されたタイムアウトでモーダルウィンドウを非表示にし、モーダルウィンまたは要素を再度ロールオーバーするとクリアすることを意味します

ただの思いつき＾＾

例はこちら

Answer 2

両方の div を別の div で囲むことができる場合。

<div id="outter">
  <div id="inner">
    ....some stuff
  </div>
  <div id="modal">
    ...some stuff
  </div>
</div>

マウスオーバーを内側に、マウスアウトを外側に設定します。