他の要素の下にあるもののためのホバー

Question

私は、ツールチップをいくつかの文脈上の助けを提供したいと思う状況があります...しかし、私が持っている要素は時に絶対配置された要素の下にあります。

私はこれがおそらく不可能であることを認識していますが、最上位レイヤ要素の下にある要素を調べることができないと考えていましたか？

私はこれがどのように行われるか分かりません。私はどちらかのCSSやJavaScriptを使用して心配しないでくださいしかし、正しい方向に任意のヘルプは高く評価されます。

絶対配置されたdiv（赤い落書きの灰色のボックス）の下のバーの画像を参照してください。

グリーンバーは相対的な位置にあり、個々のバーも配置されていることに注意してください：絶対的です。

Answer 1

それぞれの子div内でマウスヒットを確認する必要があります。それはそれのためのフィドルですhttps://jsfiddle.net/6rx18d56/1。ヒットテスト：

function inside(a, x, y) { 
    var l = a.offset().left; 
    var t = a.offset().top; 
    var r = l + a.outerWidth(true); 
    var b = t + a.outerHeight(true); 

    return l <= x && x <= r && 
     t <= y && y <= b; 
} 

EDIT：

笑、うん、私はそれが来ていた知っていました。 https://jsfiddle.net/6rx18d56/2/をチェックしてください。私はそれをやや一般的なものにしました。うまくいけば、あなたのチャートにIDとクラス名の根拠があります。とにかく、ヒットテストは、jQueryを使って要素を通じて同じ、私たちはループされて元のオーバーレイを追跡し、ヒットがすでに発生しましたかどうか：

$(".foo").on("mousemove", function(e) { 
    var hit = false; 
    var self = $(this); 

    $(".x, .y").each(function(ignore, d) { 
    if (!hit) { 
     if (inside($(d), e.pageX, e.pageY)) { 
     self.attr("title", $(d).attr("title")); 
     hit = true; 
     } 
     else { 
     self.attr("title", ""); 
     } 
    } 
    }); 
}); 

Answer 2

それはかなり冗長になってしまうだろうが、あなたは、jQueryの位置を使用することができます。

var pos = $("myDiv").position();

を次にて位置を決定します。

についてはこちらをお読み

console.log(pos.left, pos.top, pos.right, pos.bottom)

詳細：

https://api.jquery.com/position/

次に、.mousemoveがdivの範囲内にあるかどうかを確認できます。ここで読む：

https://api.jquery.com/mousemove/

しかし、平均的な使用のためにこのisfar複雑すぎるかなり良いチャンスがあります。