11

これは私を夢中にさせています。

下の境界からdivを離れる場合にのみ、mouseleave jqueryエフェクトを起動する方法はありますか?

つまり、マウス ポインターが他の 3 つの境界線のいずれかを通って div を離れた場合に、上記の効果が発生しないようにします。

それは何らかの座標の問題であるに違いないと思いますが、オフセットではなく位置も私には答えのようには見えません。

そのようなことができれば、それを行う方法のほんの少しの例をいただければ幸いです。

同様の質問がすでに行われている (および回答されている) 場合は、リダイレクトも歓迎します。

ありがとう！

4

6 に答える 6

19

これはどう：

$("div").mouseleave(function(e){
    var $this = $(this);

    var bottom = $this.offset().top + $this.outerHeight();

   if(e.pageY >= bottom) alert("BOTTOM"); 
});

http://jsfiddle.net/uqcU6/6/

于 2011-08-02T20:55:47.280 に答える
2

HTMLの場合

<div></div>

とCSS

div {
    border:2px dashed lightblue;
    width:200px;
    height:200px;
    margin:20px 0 0 20px;
}

と JavaScript

var divPosition = $('div').position();
var bottom = divPosition.top + $('div').height();
var left = divPosition.left;

$('div').mouseleave(function(e) {
    if (e.pageX > left && e.pageY > bottom) {
        console.log('bottom out');   
    }
});

またはdemo、コンソール出力は、マウスが底から離れたときにのみ発生します<div>

于 2011-08-02T21:04:39.080 に答える
1

最も簡単な解決策は、ラッパーdivを使用して、mouseleaveイベントをラッパーに割り当てることです。

http://jsfiddle.net/AlienWebguy/TDCgM/

于 2011-08-02T20:52:34.583 に答える
1

簡単な解決策は、要素の下部に配置された透明なdiv絶対値を配置し、そのdivでaをリッスンして、親divでmouseenterをトリガーすることです。mouseleave

于 2011-08-02T20:52:56.430 に答える
1

mouseLeave ハンドラー内に、マウスが要素の下部よりも低いかどうかを確認する条件ステートメントを追加します。そうである場合、マウスが下の境界線から出た可能性が最も高いです。

例：

$("#yourDiv").mouseleave(function(e){
  if (e.offsetY >= $("#yourDiv").height() ){
    alert("perform the mouse leave action!");
  }

});

于 2011-08-02T21:11:04.703 に答える
1

別の div を追加できない場合の別の解決策は、問題の div の下の y 座標を取得することです。そして、mouseleave イベントでマウスがそれより下にあるかどうかを確認します。x1 < xm < x2 を確認する必要がある場合があります。x1 は div の左 x 座標、x2 は div の右 x 座標、xm はマウスの x 座標です。

@kingjivはコード例で私を打ち負かしましたが、サイドチェックは全体を改善するかもしれません.

于 2011-08-02T20:56:49.777 に答える