使用 jQuery 放大元素的“悬停”区域 - 最简单的方法

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

Answer 2

您可以在每个想要扩大悬停区域的元素内动态插入一个元素。这是一个示例，它在每个 child 元素中插入一个 hoverZone，该元素具有更大的宽度和高度以及绝对定位，从而将其向上和向左移动以覆盖子元素。

调整宽度/高度，加上顶部/左侧的绝对偏移量，以获得所需的放大悬停区域。

function hovered() {
  console.log("Child element hovered!");
}

$(".child").append("<div class='hoverZone'></div>")

$(".hoverZone").hover(hovered);

.parent {
  width: 100%;
  height: 100%;
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 20px;
  float: left;
  position: relative;
}
.hoverZone {
  width: 150px;
  height: 150px;
  position: absolute;
  left: -25px;
  top: -25px;
}
.hoverZone:hover {
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>