オーバーレイ/カバー/スタックされた要素のJavascriptマウスイベント

Question

他の要素の下に配置されている要素のマウスイベントをキャッチしたいと思います。ここで

は、私が持っているものの一例である：http://jsfiddle.net/KVLkp/13/

は今、何をしたいマウスが赤い四角の上にあるときに青い四角が黄色の境界線を持っていることです。

重要なものは以下のとおりです。

• 彼らはイメージです。したがって、他の要素に の要素を埋め込む方法はありません。
• これは簡単な例ですが、実際には多くの画像があります。だから、座標計算によってホバー要素の 検索が私の 溶液（私はすでに、この答えを見つけた）
• マウスがそれらの上にあることを、すべての

感謝を除く二つの画像間のリンクはありませんされていませんあなたは、あなたの助け

編集： は、私は私の一般的な例より完全な例を書いた： - DOM内のimg順序が固定されておらず、ライブ に変更することができます - 上部と下部の画像は、さまざまなサイズと位置を持っています

皆様おかげさまで！

Answer 1

次の線に沿って何かを試みることができる：

<style> 
img.hover { 
    border-color : yellow; 
}​ 
</style> 
<script> 
$('img').mouseenter(function() { 
    $(this).addClass("hover"); 
}).mouseleave(function (e) { 
    var next = e.relatedTarget; 
    if (next.tagName.toUpperCase()!="IMG" 
       || $(next).hasClass("hover")) 
     $(this).removeClass("hover"); 
}); 
</script> 

直接ではなく、境界線の色を設定し、私ができるように、私は、色を設定し、「ホバー」と呼ばれるクラスを定義しました与えられた要素がどこにでも色をハードコードしないで境界線を持っているかどうかを簡単にテストしてから、event.relatedTargetプロパティを使ってマウスがどこに残っているかを確認しました。

"ホバー"クラスは、マウスが移動しようとしている要素がイメージでないか、既にホバークラスを持つイメージである場合にのみ削除されます。このデモではかなりうまくいくようです：http://jsfiddle.net/KVLkp/18/しかし、2つの画像が隙間なく並べてある場合や、上の画像が完全に "含まれていない"場合（座標の意味で）は動作しません。 imgが重なっている - デモでevent.relatedTargetがあなたの実際の状況に合ったものを考え出すのに十分であることを願っているので、私は先に進んで投稿することを決めました。

（注：「ホバー」はすでに:hover疑似クラスを持つクラス指定したCSSに悪い名前ですが、私は私がここにフィドルでそれを変更し、気にすることができませんでした思い出した時点で）

Answer 2

私はあなたがしなければならないものよりも複雑なものだと思います。あなたのイベントを内側の四角形と外側の四角形に単純に入れておきますが、 "this"を使用しないでください。 $（ '＃bluesqure'）、ちょうどホバーが青い四角にあるかのように作業してください。

実際のシナリオではこれが解決策になるかどうかわかりません。