移动时悬停内容上会显示框大小边框

Question

代码：

   <div class="block">

    </div>

div.block
{
   box-sizing: border-box;
}
div.block:hover
{
   border: 1px solid orange;
}

当使用box-sizing悬停块时，里面的内容正在移动，如何防止这种情况？

Answer 1

div.block {
   box-sizing: border-box;
   border: 1px solid [your bg color];

}
div.block:hover {
   border: 1px solid orange;
}

试试这个：）

当您悬停时，它会添加边框。所以它制作额外的像素。如果您为原始项目添加边框（此案例块），则不必添加新像素，因为它们已经存在。

如下所述：border 1px solid transperparent wil工作正常

Answer 2

如果您不关心旧的IE版本，请尝试：

div.block:hover {
   box-shadow: 0 0 1px orange inset;
}

或使用以下

div.block {
   border: 1px solid transparent;
}
div.block:hover {
   border-color:orange;
}

Answer 3

添加填充，然后在悬停时删除等于边框像素的

。

div.block
{
   box-sizing: border-box;
   padding: 10px;
}
div.block:hover
{
   border: 1px solid orange;
   padding: 9px;
}