如何在鼠标悬停Font Awesome图标时添加边框且不改变元素位置

我太懂这种恼人的小问题了——给图标容器加悬停边框时，边框会额外占用布局空间，导致元素整体尺寸变大，自然就出现了轻微偏移。别担心，下面给你几个简单又实用的解决办法：

方法1：默认设置透明边框，悬停切换颜色 #

这个思路是让元素默认就拥有和悬停状态相同宽度的透明边框，这样悬停时只是把边框颜色从透明改成目标色，元素的总尺寸完全不会变，位置自然就稳了。

修改后的CSS代码如下：

#exit { position: absolute; top: 2rem; left: 50%; z-index: 2; margin: 0 auto; }
#exit div { 
  position: relative; 
  left: -50%; 
  padding: 0 1rem; 
  margin: 1; 
  border: 4px solid transparent; /* 预设透明边框，提前占用空间 */
  transition: border-color 0.2s ease; /* 可选：加个过渡动画，hover效果更丝滑 */
}
#exit div:hover { border-color: #f4efde; } /* 悬停时切换边框颜色 */
#exit div:active { background-color: #f4efde; color: #0f0f0f; }

方法2：用outline替代border #

outline是绘制在元素边框外侧的线条，它不会占据元素的布局空间，完全不影响元素的尺寸和位置。唯一要注意的是，默认情况下outline不跟随元素的圆角（如果你的元素有圆角的话），但你的示例里没有圆角，刚好完美适配。

只需要修改悬停样式即可：

#exit div:hover { outline: 4px solid #f4efde; }

方法3：box-sizing: border-box + 固定尺寸（适合需要精确控制的场景） #

如果你一定要用border，可以给元素设置box-sizing: border-box，让边框的宽度被包含在元素的宽高之内，再提前给元素设置固定宽高来预留边框空间。不过这种方法需要你明确元素的尺寸，灵活性不如前两种。

示例代码：

#exit { position: absolute; top: 2rem; left: 50%; z-index: 2; margin: 0 auto; }
#exit div { 
  position: relative; 
  left: -50%; 
  padding: 0 1rem; 
  margin: 1; 
  box-sizing: border-box; /* 让边框计入元素自身宽高 */
  width: 48px; /* 根据图标大小+边框宽度调整数值 */
  height: 48px;
}
#exit div:hover { border: 4px solid #f4efde; }
#exit div:active { background-color: #f4efde; color: #0f0f0f; }

你可以根据自己的需求选其中一种方法，个人推荐第一种或者第二种，简单又省心~

内容的提问来源于stack exchange，提问作者Hirad Fazeli