擴大懸停區域，同時保持背景色

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更多信息。