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

Question

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

假设我有元素 X，并希望当鼠标从各个方向以 50px 的距离接近该元素时触发事件。

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

提前致谢！

Answer 1

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

调整 width/height 加上 top/left 的绝对偏移，以提供您想要的放大悬停区域。

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>

Answer 2

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

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

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

Enlarge "hover" area of an element with jQuery - the easiest way

html

javascript

css

jquery

hover