如何修复鼠标悬停时抖动的按钮？附问题复现代码

这个抖动问题的根源其实很好理解：当你把鼠标移到按钮上时，transform: translateY(-3px)让按钮向上偏移了3px，这时候鼠标可能刚好离开了按钮原本的触发区域（毕竟按钮位置变了），浏览器就会判定鼠标“离开”按钮，触发mouseout事件，按钮回到初始位置；紧接着鼠标又重新落在按钮上，再次触发hover效果，如此循环往复，就产生了烦人的抖动。

下面是几种靠谱的修复方案，按推荐程度排序：

方案1：用伪元素承载视觉效果（最推荐） #

把按钮的背景、hover动画都放到伪元素上，原按钮保持固定的尺寸和位置不变。这样hover时只有伪元素（作为视觉背景）移动，鼠标始终在按钮的触发范围内，从根源上解决抖动问题。

修改后的代码：

body { padding: 1rem; }
button {
  background: transparent;
  color: #fff;
  padding: 1rem;
  border: none;
  position: relative;
  cursor: pointer;
}
button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: blue;
  z-index: -1;
  transition: all 0.2s ease;
}
button:hover::before {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

<button>no more shaky</button>

方案2：添加透明边框抵消位移影响 #

如果不想用伪元素，可以给按钮提前设置一个透明的底部边框，边框高度和hover时的位移量一致。这样按钮向上移动后，边框会填补位移的空间，让按钮的整体占位尺寸保持不变，鼠标不会脱离触发区域：

body { padding: 1rem; }
button {
  background: blue;
  color: #fff;
  padding: 1rem;
  border: 3px solid transparent; /* 提前占好3px的位移空间 */
  transition: all 0.2s ease;
}
button:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

注意：这里的3px要和translateY(-3px)的位移量完全匹配，才能保证占位尺寸不变。

方案3：用will-change提前通知浏览器（快速调试用） #

这个方法是告诉浏览器该元素即将发生变换，让它提前做好渲染准备，有时候能缓解抖动（但不如前两种方案彻底，适合快速验证问题）：

body { padding: 1rem; }
button {
  background: blue;
  color: #fff;
  padding: 1rem;
  will-change: transform; /* 提前告知浏览器要做变换 */
  transition: all 0.2s ease;
}
button:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

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