Question

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

假设我有元素X并希望当鼠标接近这个元素时触发事件，距离所有边的距离为50px。

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

提前致谢！

Answer 1

你真的不需要任何附加元素的脚本，可以用伪：

来完成

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

您可以在要添加放大区域的每个元素中动态插入元素。这是一个将ssc describe sencode插入每个hoverZone元素的示例，其中宽度和高度加上绝对定位，将其向上移动到左侧以覆盖子元素。

调整宽度/高度，加上上/下的绝对偏移量，以给出您想要的放大的悬停区域。

＆＃13;

child

＆＃13;

function hovered() {
  console.log("Child element hovered!");
}

$(".child").append("<div class='hoverZone'></div>")

$(".hoverZone").hover(hovered);

＆＃13;

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

＆＃13;

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

2 个答案: