将鼠标悬停在其他人的下方

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;
}

修改

是的，哈哈，我知道即将到来。查看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/

但是，这对于平均使用来说太复杂了。