扩大悬停区域，同时保持背景色

Question

我有一个div，我想扩大其“悬停区域”。 （如果您的鼠标位于元素的外部，则css：hover选择器应仍然有效。）

我尝试创建一个透明边框：（ border:10px solid transparent; ）不幸的是，我的div具有背景色，并且背景“渗入”了边框区域。 （有关该问题的演示，请参阅小提琴 。）

我也尝试使用outline代替边框，但是在悬停时，轮廓线似乎并没有“计数”为元素的一部分。 （看起来不错，但不会检测到额外的悬停区域。）

有没有办法用普通的CSS（最好没有很多额外的元素）来做到这一点？ 如果没有，是否有使用香草JS（ 没有jQuery ）的简单方法？

 $("#toggle").click(function(){ $("#attempt").toggleClass("border"); }); 

 #attempt { width:100px; height:200px; background:#aaa; margin:50px; } #attempt.border { margin:20px; /* Change margin to keep box in same place after border adds size */ border:30px solid transparent; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div id="attempt"></div> <button id="toggle">Toggle Border</button> <p>Border (in the ideal case) would not change the element's background. However, adding the 30px border (even when transparent), will cause the background to change size.</p> 

Answer 1

防止背景泄漏的所有操作都是box-sizing属性。 这是非常重要的。 只需将其添加到#attempt ：

#attempt {
  box-sizing: border-box;
}

在此处查看更新的小提琴。 您可以在此处了解有关box-sizing更多信息。