如何通过CSS解决图标鼠标悬停时的抖动问题

这个抖动问题的根源很清晰：你在hover状态下给.Expand-img添加了padding: 0px 3px;，这会改变元素的盒模型尺寸，触发页面重排（reflow），导致图标位置突然偏移，看起来就是“抖动”。

下面是两种简单有效的解决方法：

方法一：默认状态预留padding空间 #

给默认状态的.Expand-img设置相同的padding值，这样hover时只是改变背景色，不会改变元素的尺寸：

.Expand-img{ 
  position: absolute; 
  top: 5px; 
  right: -2px; 
  color: white; 
  font-size: 25px; 
  padding: 0 3px; /* 新增：和hover状态一致的padding */
}
.Expand-img:hover{ 
  background: #468483; 
  /* 这里的padding可以移除，或者保留也不影响，因为默认已经设置了 */
}

原理：提前把padding的空间预留出来，hover时只修改背景色，元素的宽高不会发生变化，自然就不会抖动了。

方法二：用box-shadow模拟背景效果（不修改盒模型） #

如果不想改变默认状态的padding，可以用box-shadow来实现类似的背景填充效果，它不会影响元素的盒模型尺寸：

.Expand-img{ 
  position: absolute; 
  top: 5px; 
  right: -2px; 
  color: white; 
  font-size: 25px; 
}
.Expand-img:hover{ 
  /* 用inset内阴影模拟背景色，参数依次为：水平偏移、垂直偏移、模糊半径、扩展半径、颜色 */
  box-shadow: inset 0 0 0 3px #468483; 
}

原理：inset内阴影是绘制在元素内部的，不会改变元素的外部尺寸，所以hover时不会触发重排，也就不会有抖动问题。如果需要调整阴影的范围，可以修改扩展半径的值（上面的3px）。

你可以根据自己的布局需求选择其中一种方法，两种都能完美解决抖动问题~

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