Question

我有一个div，我想扩展＆＃34;悬停区域＆＃34;的。（如果您的鼠标位于元素之外，则css：hover选择器应该仍然有效。）

我尝试创建一个透明边框:( border:10px solid transparent;）不幸的是，我的div有背景颜色，背景＆＃34;泄露＆＃34;进入边境地区。（有关此问题的说明，请参阅fiddle。）

我也尝试使用outline代替边框，但大纲似乎没有＆＃34; count＆＃34;作为悬停时元素的一部分。（看起来不对，但是没有检测到额外的悬停区域。）

有没有办法用纯CSS（最好不是很多额外的元素）做到这一点？如果没有，是否有一个简单的方法使用vanilla JS（没有jQuery ）？

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

阻止背景泄漏所需的只是box-sizing属性。这是一个非常重要的问题。只需将其添加到#attempt：

即可

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

查看更新的小提琴here。您可以详细了解box-sizing here。

在保持背景颜色的同时展开悬停区域

1 个答案: