如何在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. */ }