jQueryで他のレイヤの下にdivを移動

Question

jQueryでホバーバインディングされた要素の「上」にあるすべてのdivを無視することはできますか？例えば、私はそれにバインドされたホバーイベントを持つ要素Aを持っていますが、要素Aの上に "絶対配置"されている他の要素B、C、Dもあります。したがって、ユーザーのマウスが要素B、C、 Dでは、B、C、Dが要素の真上にある場合でも、ホバーイベントは発生しません。要素B CとDを無視することは可能ですか？

更新： 実際には、要素B、C、Dをエリアラベルとして使用してマップ（要素A）を作成しようとしています。たとえば、ニューヨーク州の地図では、地図に重なるテキスト要素「マンハッタン」や「ニュージャージー」などが表示されます。これは、ユーザーがラベル上にマウスを持っていても、ホバーを放つ必要があるためです。

Answer 1

今私が気づいている唯一の解決策は、目に見えない要素を上に作成し、それにホバートリガーを付けることです。

Answer 2

私はそれを見る方法、あなたはいくつかのオプションがあります。

• がIvarskaが推奨されているように行い、及びそれらのすべての上に空の要素を作成し、トリガーのためにそれを使用します。
• ページ全体でmousemoveにバインドし、「ボックスの内側」（つまりターゲット要素上）のタイミングを見つけます.-基本的に、ホバーイベントを再現します。 （しかし、これはあなたのページにいくつかのかなり深刻オーバーヘッドを追加しません）
• 再設計

また、単に、その後、単にターゲット（すなわちA）、あなたはそれがAと重なることが持っている任意の要素と結合することができるかもしれ他のコントロール内のマウスの位置がAコントロールの内部にあるかどうかを確認します。ページへのバインディングとチェックよりもオーバーヘッドが少なくて済みますが、それ以上に典型的なものです。

Answer 3

CSS3を使用できる場合は、絶対配置された要素に対してpointer-events:noneを設定できます。demo hereを参照してください。

All modern browsersこのプロパティはIE9以下、Opera Miniではサポートしていません（執筆時点で）。また、あなたが望むものと正確には異なるかもしれないそれらの要素に対するポインタイベントを持たないことを意味します。

Answer 4

A要素のZ-インデックスをB、C、D要素のZ-インデックスより高くすることができます。

Answer 5

この問題を解決するにはいくつかの方法がありますが、おそらく最も簡単なのはすべての要素にホバーイベントを追加することです：

HTML

<div id="a" class="hover"></div> 
<div id="b" class="hover"></div> 
<div id="c" class="hover"></div> 
<div id="d" class="hover"></div> 
<div id="state">unhovered</div> 

CSS

#a { 
    width: 350px; 
    height: 300px; 
    border: 1px solid #000; 
    background-color: #ccc; 
} 
#b { 
    position: absolute; 
    top: 35px; 
    left: 35px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
} 
#c { 
    position: absolute; 
    top: 85px; 
    left: 85px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
} 
#d { 
    position: absolute; 
    top: 85px; 
    left: 135px; 
    width: 35px; 
    height: 30px; 
    border: 1px solid #000; 
    background-color: #cca; 
} 

jQuery

$(document).ready(function(){ 
    $('.hover').hover(
     function(){ 
      $('#state').text('hovered'); 
     }, 
     function(){ 
      $('#state').text('unhovered'); 
     } 
    ); 
}); 

ここで例：http://jsfiddle.net/userdude/H5TAG/

Answer 6

使用e.relatedTargetユーザーがあなたのネストされた（絶対）の要素のうちの1つの上に浮かんだかどうかを判断します。あなたが与える場合はたぶん、簡単にあなたのマップが

例えばクラスにラベルを付け：地図上のホバー状態の時に、あなたにラベルを表示し、ユーザーだけがzインデックス調整マップ

$("#map").hover(
     function(e) { 
     $(this).find(".labels").fadeIn(); 
     }, 

     function(e) { 
     if($(e.relatedTarget).hasClass("maplabel")) { 
      //The user has hovered over a label...Do nothing (or some other function) 
     } else { 
      // User has left the map and isn't over a label 
      $(this).find(".labels").fadeOut(); 
     } 
    ); 

Answer 7

を離れたときにそれらを非表示にするには他の誰かが作品を言いました。ホバーで認識させたい項目のz-インデックスを高くします。