当鼠标悬停在某个元素上时，如何在不更改其位置的情况下为其添加边框

Question

当我为字体图标添加边框时，当鼠标越过它时，它的位置开始发生一点变化。我不知道为什么会发生这种事。当鼠标越过图标时，会出现一个边框，但它也会稍微改变元素的位置。我只想让边界出现，而不是其他任何东西。这就像通过添加边框，元素的宽度和高度会发生变化。

#exit {
position: absolute;
top: 2rem;
left: 50%;
z-index: 2;
margin: 0 auto;
}
#exit div {
position: relative;
left: -50%;
padding: 0 1rem;
margin: 1;
}
#exit div:hover {
border: 4px solid #f4efde;
}
#exit div:active {
background-color: #f4efde;
color: #0f0f0f;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div id="exit">
<div>
<i class="fa-solid fa-xmark"></i>
</div>
</div>

相关元素的图像

Answer 1

答案是还有一个处于非悬停状态但不可见的边界。在下面的代码中添加了一行。

#exit div {
position: relative;
left: -50%;
padding: 0 1rem;
margin: 1;
border: 4px solid transparent;  <------ Like this
}
#exit div:hover {
border: 4px solid #f4efde;
}

Answer 2

正如Cute Code中提到的@Cutey一样，一种解决方案是应用透明边框，然后在悬停上获得颜色，但另一种选择是在悬停上应用轮廓。不同的是，边界确实会影响框模型，因此会导致元素的移动，而轮廓不会影响框模型并添加到元素周围而不会移动。

轮廓偏移量可以是正数或负数，以控制轮廓相对于div.

#exit {
position: absolute;
top: 2rem;
left: 50%;
z-index: 2;
margin: 0 auto;
}
#exit div {
position: relative;
left: -50%;
padding: 0 1rem;
margin: 1;
}
#exit div:hover {
outline: 4px solid #f4efde; // I added this
outline-offset: 0 // I also added this just so you can experiement with te offset to your liking
}
#exit div:active {
background-color: #f4efde;
color: #0f0f0f;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<div id="exit">
<div>
<i class="fa-solid fa-xmark"></i>
</div>
</div>