优化悬停覆盖层动画：简化HTML+CSS实现方案

核心思路是将覆盖动画与内容切换绑定到同一触发事件，用统一的transition参数保证动画同步，同时精简DOM结构到「容器 + 两个内容div」，完全不用伪元素或额外覆盖层div。

实现步骤 #

1. DOM结构：仅保留容器和两个内容div，分别对应初始状态和悬停后的状态。
2. 布局定位：两个内容div在容器内绝对定位重叠，确保切换时位置一致。
3. 同步动画：给容器hover状态下的两个div设置同步的transition，让覆盖滑动和内容显隐同时触发，消除延迟。
4. 覆盖效果实现：利用第一个内容div的transform: translateX()实现滑动覆盖，同时配合opacity完成退场；第二个内容div同步从透明转为可见。

完整代码示例 #

<div class="hover-container">
  <div class="content-pre">初始内容</div>
  <div class="content-post">悬停后内容</div>
</div>

.hover-container {
  position: relative;
  width: 300px;
  height: 150px;
  overflow: hidden; /* 裁剪滑动超出的部分 */
  cursor: pointer;
}

.content-pre, .content-post {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* 统一动画时长和曲线 */
}

.content-pre {
  background: #f0f0f0;
  z-index: 2; /* 初始时在上方 */
}

.content-post {
  background: #4CAF50;
  color: white;
  opacity: 0;
  z-index: 1; /* 初始时在下方 */
}

.hover-container:hover .content-pre {
  transform: translateX(100%); /* 向右滑出容器 */
  opacity: 0;
}

.hover-container:hover .content-post {
  opacity: 1;
}

关键细节说明 #

• 无延迟卡顿：两个div的transition完全同步，hover触发时同时执行动画，避免了原方案中等待覆盖层动画完成再显示内容的延迟。
• 精简DOM：仅用3个元素（容器+两个内容div），去掉了冗余的覆盖层div。
• 动画流畅性：使用transform而非left/top做位移，因为transform会触发GPU加速，比布局属性更流畅。

如果需要反向覆盖效果，只需把transform: translateX(100%)改成transform: translateX(-100%)即可。

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