0

コンポーネント(DIV A)の 1 つにマウス オーバー ポップアップ ウィンドウ(DIV B)を作成しようとしています。これは基本的に、ユーザーがテーブル項目にカーソルを合わせると表示されるフィルター ポップアップです。

マウスの動きを示す図は次のとおりです。

マウスの動きを図で表します

  1. マウスが DIV A に入り、DIV B がポップアップします。
  2. マウスは DIV A を離れ、DIV B は消えます。
  3. マウスは DIV A を DIV B に残しますが、DIV B はまだ開いたままです
  4. マウスが DIV B を離れ、DIV B が消える。

ステップ（1）にjQueryマウスオーバーを使用していますが、これは正常に機能します。ステップ（2）にもjQuery mouseLeaveを使用していますが、これも正常に機能します。

私の問題はステップ(3)です。DIV Aを離れるマウスでリッスンしようとしていますが、 DIV Bを介してDIV Aを離れる場合は、 DIV Bを削除しないでください。どうにかしてmouseLeavesの場合は言いたいのですが、マウスがDIV Bの上にある場合は非表示にしないでください。ある種の mouseOver イベント? mouseMotion リスナー?

これは私がこれまで持っているコードです:

$(this.filterFlag).mouseover(function(){
    self.view.appendChild(self.pop.getView());
});
$(this.filterFlag).mouseleave(function(){
    self.view.removeChild(self.pop.getView());

    //but if mouse leaves into the popup, don't hide pop up.
});

どうすればこれを行うことができますか？

4

1 に答える 1

1

、これらのイベントが発生したときに &のイベントを追加するmouseenterと、の対応するイベントがトリガーされます。これは非常に非効率的ですが、機能します。mouseleaveBA

また、self.pop.getView()呼び出しごとに同じ要素を返す場合は、イベントのバインドを解除して再バインドする必要があることに注意してください。

$(this.filterFlag).mouseover(function(){
    var that = this;
    var c = self.pop.getView();
    self.view.appendChild(c);
    $(c).mouseenter(function() {
      $(that).mouseenter();
    })
    .mouseleave(function() {
      $(that).mouseleave();
    });
});
$(this.filterFlag).mouseleave(function(){
    self.view.removeChild(self.pop.getView());

    //but if mouse leaves into the popup, don't hide pop up.
});

ここにサンプルのフィドルがあります。

CSS ソリューションはより効率的になります。

HTML:

<div class='parent'>
  <div id='A'></div>
  <div id='B'></div>
</div>

CSS:

#B { display: none;}
.parent:HOVER #B { display: block;}
于 2013-07-02T10:22:48.560 に答える