Question

我有一个简单的布局，由盒子组成。

＆＃13;

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

＆＃13;

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

＆＃13;

当悬停在一个盒子上时，我希望它能够获得更宽的边框。实际上它是有效的，但所有其他盒子正在走开并摧毁网站。我该如何防止这种行为？添加填充不能实现此目标。

我看过this帖子，唯一可能的解决方案是使用position: absolute;。我需要为每个盒子分配单独的参数。不是一种更简单的方法，但我只想使用一个类。

Answer 1

将box-sizing:border-box;添加到.action_box班级：

.action_box {
   width: 300px;
   height: 200px;
   border: 1px solid black;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
  box-sizing:border-box;
 }
 .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>

Answer 2

实际上很容易做到。如果你不想走绝对位置路线，你可以采用两种方式：如果你不介意compatibility compromise或使用{{1}，请用增加的边框代替方框阴影。 }。 box-sizing:border-box唯一的问题是它向内移动内容（样式规则计算box-sizing:border-box属性中的总宽度+填充+边框宽度。如果将5px边框设置为100px框，宽度通常为110px，包括左右边框。使用width属性，它会计算box-sizing的边框宽度，使其宽度为90px，而不是允许10px的边框宽度。）

j08691已经在他的答案中有了盒子大小的解决方案，所以这里是盒子阴影方法（注意我只添加了1px的盒子阴影。这是因为边框仍然存在，提供所需宽度的一半）：

＆＃13;

width

＆＃13;

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

＆＃13;

但是，如果您不想要这些方法，那么仍然存在<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>解决方案。对于这种方法，您不需要其他类或类似的东西。您可以使用伪元素。这可能是你所需要的，但它仍然是一种选择。

＆＃13;

position:absolute

＆＃13;

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

＆＃13;

Answer 3

可能的解决方案可能是使用box-shadow代替border：

.action_box:hover {
    box-shadow: inset 0 0 0 1px black;
}

DEMO

注意：使用此解决方案，内部内容不会移动：）

如何在增加边框宽度时防止相邻元素移动？

3 个答案: