javascript - 如何在 jQuery 的 hover() 事件的热点中包含元素的边距？

Question

   jQuery(".my_container").hover(function(){
    //do code
   }, function(){
    //do code
   });

.my_container { width: 100px; height: 100px; margin: 50px; }

上面的代码对鼠标悬停边距没有反应（边距不是元素的一部分？） - 我该如何更改？

Answer 1

您可以改用 50px 透明边框 - 边距实际上不应该是可鼠标的...

Answer 2

包括一个伪元素，例如

.my_container:before {
    content:'';
    position:absolute;
    top:-50px;
    bottom:-50px; 
    left:-50px;
    right:-50px; 
}

这为现有元素的可点击区域增加了 50 像素。

如果您只想在触摸屏设备上添加它，您可以这样做：

.touchevents .my_container:before {
    ...
}

这需要像Modernizer这样的东西来插入适当的基于特征的 CSS 类。

---

更新

根据@Jaladh 的评论，您可能还需要应用于position:relative容器元素，因为position:absolute上面将相对于具有position属性的第一个祖先：

.my_container {
    position:relative;
}

Answer 3

也许在外部元素上使用第二个包装元素，在内部元素上使用现有的背景和填充样式：

<div class="my_container">
    <div class="my_container_inner">
        <!-- etc. -->
    </div>
</div>

jQuery(".my_container").hover(function(){
  //do code
}, function(){
  //do code
});

.my_container { padding: 50px; }
.my_container_inner { width: 100px; height: 100px; /* etc. */ }

Answer 4

在@Dunc 的解决方案的基础上，您也可以使用伪元素来模仿您的容器，让实际容器的行为类似于 margins。这看起来像：

.my_container { 
    width: calc(100px + (2 * 50px));
    height: calc(100px + (2* 50px));

    position: relative;
}

.my_container::before {
    content: '';
    position: absolute;
    top: 50px;
    bottom: 50px; 
    left: 50px;
    right: 50px; 
}

还要确保将您拥有的所有其他属性（如背景颜色、边框等）移动my_container到其中，my_container::before因为before这里的行为就像我们的容器一样。

如果您的容器是网格项目并且您希望它们之间的间隙可以悬停，这基本上很有帮助，因为否则在这种情况下使用伪元素添加边距将无法正常工作。

Answer 5

将边距更改为填充，它将是可悬停的。