javascript - 使用 jQuery 放大元素的 "hover"区域 - 最简单的方法

Question

为特定元素周围指定大小的区域实现悬停事件(在 jQuery 中:element.hover(IN, OUT))的最简单方法是什么？

假设我有元素 X，并希望当鼠标从四面八方接近该元素且距离为 50 像素时触发事件。

元素 X 复杂地嵌套在表格等中，所以我不能使用任何父项。我如何单独使用元素或使用某些嵌套元素来解决这个问题？

提前致谢!

Answer 1

你真的不需要任何额外元素的脚本，它可以用伪造来完成:

Demo

div {
  position: relative;
  background: blue;
}

div:before {
  content: '';
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  position: absolute;
  top: -50px;
  left: -50px;
}

$('div').hover(function() {

  $(this).css('background', 'yellow');
}, function() {

  $(this).css('background', 'blue');
});