ネストされていない 2 つの div 要素がありますが、それらは重なっているようです。
マウスが2番目のdivに入ったときに最初のdivのホバー機能をキャッチするにはどうすればよいですか?
(マウスがオレンジ色の領域にある場合、マウスも灰色の領域にあると思います。)
[http://jsfiddle.net/tZFuX/2/][1]を確認してください。
ありがとう!
これを試して:fiddle
$('.div1').on({
mouseenter: function(){
alert('mouse entered at div1');
}
});
$('.div2').on({
mouseenter: function(){
alert('mouse entered at div2');
$('.div1').trigger('mouseenter');
}
});
アラートはこのように機能しますが、addClass で試すことができます。
$('.div2').on({
mouseenter: function () {
$('.div1').addClass('active');
}
});
$('.div1').on({
mouseout: function () {
$(this).removeClass('active');
}
});
純粋な CSS を使用すると、結果が WebKit と Firefox でのみ機能することに満足している限り、pointer-eventsを使用できます。また、適用先の要素からすべてのマウス操作が削除されます (クリックやテキスト選択などはありません)。 .
これを次のように適用します。
.div2 {
pointer-events: none;
}
http://jsfiddle.net/barney/Mcxf2/
したがって、それをスクリプト化されたソリューションに結び付けるのは非常に簡単になります。ポインター イベント依存関係のない完全にスクリプト化されたソリューションの場合、mousemove
イベントをドキュメント全体 (またはウィンドウ、ボディ、または視覚的に両方の要素を含むことがわかっている要素) にバインドしてから、プロパティをテストする必要があります。要素に対してカーソル位置をテストするために使用するコードは、マウスの移動中に継続的に実行されるため、これはかなり高価です — jQuery サイトでは、これに関する基本的なチュートリアルを提供しています。
http://jsfiddle.net/barney/AmQhs/
コードは必然的にもう少し複雑になりますが、要点は理解できます。