如何仅用CSS实现菜单Hover触发动画后暂停，离开后重置？

云原生阿岚

2026-8-5

纯CSS实现Hover菜单时保持功能标题显示的解决方案

你需要的是hover菜单图标时让功能标题平滑淡入并保持显示，直到hover结束，核心问题是默认CSS动画播放后会回到初始状态，下面提供两种纯CSS解决方法：

方法1：修正动画属性（保留fadeIn动画）

如果想继续使用你写的fadeIn动画，只需给动画加上forwards属性，让元素停在动画最后一帧，再配合离开时的过渡效果：

示例代码

假设你的HTML结构是这样的：

<div class="sub-menu-bar">
  <div class="menu-item">
    <span class="menu-icon">⚙️</span>
    <span class="menu-title">设置</span>
  </div>
</div>

对应的CSS：

/* 初始状态：标题透明隐藏 */
.sub-menu-bar .menu-item .menu-title {
  opacity: 0;
  /* 离开时添加淡出过渡 */
  transition: opacity 0.3s ease;
}

/* hover时触发淡入动画，forwards让状态保持到hover结束 */
.sub-menu-bar .menu-item:hover .menu-title {
  animation: fadeIn 0.3s ease forwards;
}

/* 淡入动画定义 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

animation-fill-mode: forwards是关键，它强制元素在动画结束后保持最后一帧的样式，直到hover状态消失，此时过渡效果会触发平滑淡出。

方法2：改用Transition过渡（更简洁高效）

对于hover触发的显示/隐藏场景，transition比@keyframes更轻量化，代码也更简单：

.sub-menu-bar .menu-item .menu-title {
  opacity: 0;
  visibility: hidden; /* 可选：隐藏后不占用布局空间 */
  /* 同时过渡透明度和可见性，保证动画同步 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sub-menu-bar .menu-item:hover .menu-title {
  opacity: 1;
  visibility: visible;
}

加visibility: hidden可以避免标题透明后仍能被点击的问题
调整0.3s可以控制动画的快慢