javascript - 将鼠标悬停在其他元素下方

Question

我有一种情况，我想通过工具提示提供一些上下文帮助...但是，我拥有的元素有时位于绝对定位元素的下方。

虽然我意识到这可能是不可能的，但我在想是否可以查询顶层元素下面的元素？

我只是不确定这将如何完成。我不介意使用 css 或 javascript，但在正确方向上的任何帮助将不胜感激。

请查看下方栏上方的绝对定位 div(带有红色涂鸦的灰色框)的图像。

请注意，绿色条是相对位置的，而各个条也是绝对定位的。

Answer 1

您必须检查每个子 div 中是否有鼠标点击；这是一个 fiddle https://jsfiddle.net/6rx18d56/1 . HitTest :

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 和类名称的基本原理。不管怎样， HitTest 是一样的，我们只是用 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", "");
      }
    }
  });
});