HTML元素间隙hover时CSS transition宽度抖动问题及解决

问题描述 #

我有一排通过cubic-bezier曲线实现宽度过渡的元素，当鼠标悬停在元素之间的空白间隙时，元素宽度会快速忽大忽小出现抖动故障，该如何修复？

原代码如下：

CSS #

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.grid {
  display: flex;
  gap: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.item {
  width: 300px;
  height: 500px;
  transition: width 0.5s cubic-bezier(.87, -1.38, .03, 1.54);
  background-image: url(https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.item:hover {
  width: 500px;
}

HTML #

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

故障原因 #

抖动的核心原因是flex布局的gap与元素hover宽度变化的联动冲突：

• 当hover元素变宽时，相邻元素被挤开，原本的gap位置发生偏移，鼠标可能意外离开当前hover元素，触发元素缩窄；
• 元素缩窄后gap位置回退，鼠标再次触发hover，形成循环导致抖动；
• 额外加剧问题的是你使用的cubic-bezier曲线包含负值，过渡时元素宽度会短暂超出目标值，进一步放大了位置偏移的幅度。

修复方案 #

方法一：用伪元素覆盖gap区域（推荐） #

给每个.item添加透明伪元素，覆盖右侧的gap区域，让鼠标始终处于某个item的交互范围内，彻底避免hover状态的反复切换。

修改后的CSS代码：

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

.grid {
  display: flex;
  gap: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.item {
  width: 300px;
  height: 500px;
  transition: width 0.5s cubic-bezier(.87, -1.38, .03, 1.54);
  background-image: url(https://cdn.pixabay.com/photo/2024/07/03/08/05/hot-air-balloon-8869138_1280.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 新增伪元素，覆盖右侧gap区域 */
.item::after {
  content: '';
  position: absolute;
  top: 0;
  right: -20px; /* 数值与grid的gap保持一致 */
  width: 20px;
  height: 100%;
}

.item:hover {
  width: 500px;
}

方法二：调整过渡曲线缓解抖动（仅缓解） #

如果不想修改布局逻辑，可以把cubic-bezier曲线替换为不会产生负值的类型，比如cubic-bezier(0.4, 0, 0.2, 1)，这样元素宽度过渡时不会超出目标值，减少位置偏移的概率，但无法彻底解决gap导致的hover循环问题。

内容的提问来源于stack exchange，提问作者A.Copland