如何实现Div鼠标悬浮添加边框且不改变原始尺寸？

以下是几种实用的解决方案，都能保证hover时.contact元素尺寸不变，避免其他元素偏移：

方案1：初始设置透明边框 #

在元素默认状态下添加与hover时宽度一致的透明边框，这样边框的空间一开始就被占据，hover时仅修改边框颜色，不会改变元素整体尺寸：

.contact {
  box-sizing: border-box;
  border: 4px solid transparent; /* 初始透明边框 */
  /* 其他样式：比如 padding、背景色等 */
}

.contact:hover {
  border-color: white; /* 悬浮时改为白色边框 */
}

方案2：使用outline替代border #

outline不属于元素的盒模型布局空间，添加outline不会改变元素的宽高，自然不会影响其他元素位置：

.contact:hover {
  outline: 4px solid white;
  outline-offset: 0; /* 可选，控制outline与元素边缘的距离，默认是0 */
}

注意：outline默认不占布局空间，且无法单独设置某一边的样式，如果需要单边效果，这个方法不适用。

方案3：用box-shadow模拟边框 #

利用box-shadow的扩展半径（spread radius）来模拟边框效果，外阴影不会占用元素的布局空间，hover时添加阴影即可：

.contact:hover {
  box-shadow: 0 0 0 4px white; /* 水平偏移0，垂直偏移0，模糊0，扩展4px */
}

这种方法的优势是可以灵活调整阴影的模糊度、颜色，甚至设置多层阴影，同时完全不影响元素布局。

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