我有一个由盒子组成的简单布局。
.action_box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.action_box p {
border: 1px solid black;
margin-top: 0px;
text-align: center;
}
.action_box:hover {
border: 2px solid black;
cursor: pointer;
}
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
当鼠标悬停在一个盒子上时，我希望它有更宽的边框。实际上它是有效的，但所有其他盒子都在移动并破坏了网站。我怎样才能防止这种行为？添加填充并不能实现此目标。
I read this https://stackoverflow.com/questions/22912335/how-to-prevent-divs-from-moving-when-i-hover-on-an-element-that-changes-size-abo发布，唯一可能的解决方案是使用position: absolute;。我需要为每个框分配单独的参数。有没有更简单的方法，但我只想使用一个类。
实际上很容易做到。如果你不想走绝对位置路线，你可以通过两种方式做到这一点：如果你不介意的话，用盒子阴影代替增加的边框兼容性妥协 http://caniuse.com/#search=box-shadow or use box-sizing:border-box。唯一的问题是box-sizing:border-box是它向内移动你的内容（样式规则计算总宽度+填充+边框宽度width属性。如果将 5 像素边框设置为 100 像素框，则宽度通常为 110 像素以包含左边框和右边框。随着box-sizing属性将边框宽度计算为width使其宽度为 90 像素，而不是允许 10 像素的边框宽度）。
j08691 在他的答案中已经有了 box-sizing 解决方案，所以这里是 box-shadow 方法（请注意，我只添加了 1px 的 box Shadow。这是因为边框仍然存在，提供了所需宽度的一半）：
.action_box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 10px;
margin-top: 10px;
}
.action_box p {
border: 1px solid black;
margin-top: 0px;
text-align: center;
}
.action_box:hover {
box-shadow: 0 0 0 1px black;
cursor: pointer;
}
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
但是，如果您不想要这些方法中的任何一种，那么仍然有position:absolute解决方案。对于此方法，您不需要另一个类或类似的东西。您可以使用伪元素来代替。对于您的需求来说，这可能有点过分了，但它仍然是一个选择。
.action_box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 10px;
margin-top: 10px;
position: relative; /* give it some context */
}
.action_box p {
border: 1px solid black;
margin-top: 0px;
text-align: center;
}
.action_box:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid black;
cursor: pointer;
}
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
