jQueryの2つの要素のmouseoutイベントをどのようにトリガーできますか?

コーナーでオーバーラップする2つのスペアリッドdiv、AとBがあるとしましょう:

+-----+
|     |
|  A  |
|   +-----+
+---|     |
    |  B  |
    |     |
    +-----+

マウスが AとBの両方を離れるときにイベントをトリガーしたい

私はこれを試した

$("#a, #b").mouseleave(function() { ... });

しかし、マウスがいずれかのノードを離れると、イベントがトリガされます。マウスがいずれかのノードを越えていない場合、イベントを発生させたい。

これを行う簡単な方法はありますか?私は、グローバル変数が各divよりもマウスの状態を追跡するというアイデアを持っていましたが、私はよりエレガントなものを望んでいました。

12
@ JarredFarrishそれは私が念頭に置いていた解決策がさらに悪化すると思う。カーソルのオフセットを追跡することはかなり扱いにくいことがあります。
追加された 著者 Peter Olson,
あなたはフィドルを作ることができますか?
追加された 著者 Rafay,
私は以前これを見てきました。私は #a、#b ごとに .offset()を使って結合座標を計算できると思います。 $( '#a、#b')。トリガー( 'mouseleave') ;
追加された 著者 Jared Farrish,

3 答え

私はいつもこの問題に遭遇しています。私がやっていることに合っていれば、私の「クイックフィックス」は次のようなものです。

var timer;

$("#a, #b").mouseleave(function() {
    timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
    clearTimeout(timer);
});


function doSomething() {
    alert('mouse left');
}

Fiddle : http://jsfiddle.net/adeneo/LdDBn/

18
追加された
+2.5それはかなり滑らかです!私はあなたがどのようにグローバル変数を1つだけ必要としているのか、プロセスはより明白な解決策ほど多くの細分化を必要としないことが好きです。
追加された 著者 Peter Olson,
要素の1つを絶対的に配置することができれば、このようなハックは必要ありません。 こちらをご覧ください。
追加された 著者 Muhd,
私は訂正した。あなたが必要とするものは、次に入れ子になっているだけです。
追加された 著者 Muhd,
素晴らしいソリューション!
追加された 著者 Murtaza,
@muhd - ポジションアブソリュートはそれとは何の関係もありません。それはイベント伝搬です。そのような要素を入れ子にしたときに起こりますが、その答えは必ずしも可能なわけではないので、入れ子に代わるものです。
追加された 著者 adeneo,
その位置は無関係です - > jsfiddle.net/5cKSf/4
追加された 著者 adeneo,
エレガンスのために+1。
追加された 著者 techfoobar,
あなたのクイックフィックスは私のための多くの迅速な解決策に思えます:)
追加された 著者 Just code,

最初のコンテナの内側に2番目のコンテナをネストすると、複雑なjQueryソリューションは必要ありません。

http://jsfiddle.net/5cKSf/3/

HTML

<div class="a">
    This is the A div
    <div class="b">
        This is the B div
    </div>
</div>

CSS

.a {
    background-color: red;
    width: 100px;
    height: 100px;
    position: relative;
}

.b {
    background-color: blue;
    width: 100px;
    height: 100px;
    position:absolute;
    top: 50px;
    left: 50px;
}

JS

$('.a').hover(function() {
   alert('mouseenter'); 
}, function() {
   alert('mouseleave');
});
3
追加された

私はあなたのようなものを使用してこれを達成することができると思います:

var mouseLeftD1 = false;
var mouseLeftD2 = false;

$('#d1').mouseleave(function() {
  mouseLeftD1 = true;
  if(mouseLeftD2 == true) setTimeout(mouseLeftBoth, 10);
}).mouseenter(function() {
  mouseLeftD1 = false;
});

$('#d2').mouseleave(function() {
  mouseLeftD2 = true;
  if(mouseLeftD1 == true) setTimeout(mouseLeftBoth, 10);
}).mouseenter(function() {
  mouseLeftD2 = false;
});

function mouseLeftBoth() {
  if(mouseLeftD1 && mouseLeftD2) {
   //.. your code here ..
  }
}
0
追加された
私は誤ってupvoteを与えたので、もう一度downvoteする必要があります
追加された 著者 Murtaza,