hover触发的transition未生效是因为只在隐藏态定义了transition而可见态缺失需在默认样式中统一设置opacity和visibility的过渡并避免使用display:none。hover 触发的 transition 为什么没生效常见现象是鼠标移上去菜单不动移开时却有淡出——说明 transition 只写在了隐藏状态比如 opacity: 0上而初始可见态没配对定义。CSS 的 transition 不是“双向自动推导”它只作用于你明确声明了变化的属性和方向。实操建议立即学习“前端免费学习笔记深入”给菜单元素同时设置「显示态」和「隐藏态」的 transition推荐统一写在默认样式里例如transition: opacity 0.2s ease, visibility 0.2s ease;visibility 必须配合 opacity 使用仅靠 visibility: hidden 切换不会触发 transition它是离散值无中间态但它是解决点击穿透的关键别用 display: none 配 transition——它不支持过渡写了也白写悬停菜单的延迟入场与防误触用户快速扫过导航栏时菜单闪现又消失体验很差。这不是 bug是 hover 响应太灵敏导致的。真正的解法不是加 delay 入场而是用 transition-delay 合理的触发区域设计。实操建议立即学习“前端免费学习笔记深入”入场不加 transition-delay但退场加transition-delay: 0.15s;写在隐藏态规则里这样鼠标无意划过不会弹但真停住就会立刻出现把 :hover 绑在父容器如 nav-item上而不是菜单自身菜单用 position: absolute 并留出 4–8px 间隙避免鼠标移出触发器时断连移动端慎用纯 hoveriOS Safari 对 :hover 有延迟或不触发需额外加 touchstart JS 逻辑或改用 click 触发transition 动画卡顿或跳变的常见原因菜单淡入时先闪一下、位置偏移、或者动画过程中文字模糊——大概率是浏览器没走 GPU 加速或者触发了 layout。 Zeemo AI 一款专业的视频字幕制作和视频处理工具