css - CSS悬停效果大小增加影响其他元素

Question

我有按钮，并为它们添加了悬停效果以更改它们的边框。它正在影响菜单的布局。

element{
   border-width:0px;
}
element:hover{
   border:1px solid gray;
}

如何在不影响布局的情况下做到这一点？

Answer 1

box-sizing: border-box将边框放在框内，应该可以解决任何尺寸问题。

Answer 2

边框宽度会改变元素的尺寸，因此您可能需要考虑额外的像素。也许这样的事情会奏效。

element{
  border:1px solid transparent;
}
element:hover{
  border:1px solid gray;
}