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