Question

我想突出显示鼠标指针所在的最里面的HTML元素。由于我的页面有滚动条，使用x，y坐标将无济于事，因为元素在我的屏幕上将有不同的x，y位置，具体取决于我滚动的数量。

如何使用jQuery实现这一目标？

Answer 1

您可以将mousemove事件与event delegation一起使用，以确定鼠标当前所在的元素。

这是一个简单的例子：

$("html").on("mousemove", "*", function(e) {
  $(".highlight").removeClass("highlight");
  $(e.target).addClass("highlight");
});

div {
  border: solid 1px black;
  padding: 0;
  margin: 0;
}

.a {
  height : 100px;
  width: 200px;
}

.b {
  height : 40px;
  width: 40px;
}

.c {
  height : 25px;
  width: 25px;
}

.highlight {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="a">
  <div class="b"></div>
  <div class="b">
    <div class="c"></div>
  </div>
</div>

突出显示最内层的HTML元素

1 个答案: