Question

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

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

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

Answer 1

您可以使用50px透明边框 - 边距实际上不应该是可刻录的...

Answer 2

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

<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 3

加入pseudo element，例如

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

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

如果您只想在触摸屏设备上添加此功能，则可以执行以下操作：

.touchevents .my_container:before {
    ...
}

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

Answer 4

将边距更改为填充，它将是可以恢复的。

Answer 5

在@Dunc解决方案的基础上，您也可以使用伪元素 来模仿您的容器，并让实际的容器像边距一样 。看起来像这样：

.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的行为就像我们的容器一样。

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

如何在jQuery的hover（）事件的热点中包含元素的边距？

5 个答案: