html - 框大小边框出现在悬停内容移动

Question

代码:

   <div class="block">

    </div>

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

使用 box-sizing 悬停 block 时，里面的内容会移动，如何防止？

Answer 1

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

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

试试这个:)

当您将鼠标悬停时，它会添加一个边框。所以它会产生额外的像素。如果您为原始元素添加边框(本例 block )，IT 将不必添加新像素，因为它们已经存在。

如下所述:border 1px solid transperparent wil work fine to