hover伪类未触发过渡效果的主因是transition未正确声明：须在常态规则中显式写出可过渡属性、时长和缓动函数，且目标属性需支持过渡（如color、transform），display等不支持；同时确保:hover样式未被更高优先级规则覆盖，初始态已声明过渡属性值。
hover 伪类没触发过渡效果？先看 transition 是否写对了
CSS transition 不会自动作用于所有属性，必须显式声明要过渡的属性（或用 all），且目标属性本身得支持过渡。常见错误是只写了 transition: all; 却漏掉时长和缓动函数，导致浏览器忽略该声明。
-
transition必须写在「常态」规则里（即非:hover的选择器中），不能只写在:hover块里 - 支持过渡的属性才有效，比如
color、opacity、transform可以，但display、height（从0到auto）不行 - 简写形式推荐：
transition: background-color 0.3s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1);
:hover 样式被更高优先级规则覆盖？用开发者工具快速定位
即使 transition 写对了，如果 :hover 中设置的属性值被其他 CSS 覆盖（比如更具体的选择器、!important 或后加载的样式），视觉上就看不到变化。浏览器渲染时只取最终计算值，过渡自然失效。
- 右键元素 → 「检查」→ 在「Styles」面板里找到对应
:hover规则，看右侧是否被划掉（strikethrough） - 对比「Computed」标签页里该属性的实际生效值，确认是不是来自预期的选择器
- 临时提高优先级不是首选：避免滥用
!important；更稳妥的是精简选择器，比如把.nav ul li a:hover改成.nav-link:hover
状态切换瞬间完成？可能是初始态和悬停态之间缺少可过渡的中间值
过渡需要两个明确的、可插值的状态。如果初始态设了 transform: none，而 :hover 里写 transform: translateX(10px)，没问题；但如果初始态压根没声明 transform，部分浏览器可能不触发过渡（尤其旧版 Safari）。
- 确保「常态」规则中已声明将要变化的属性，哪怕值是默认的：
transform: translateX(0); - 颜色过渡注意格式一致性：不要从
rgb(255, 0, 0)切到#ff0000，尽量统一用hsl()或rgba()避免插值中断 - opacity 过渡最稳妥，但要注意父元素有
opacity: 0会导致子元素不可见，hover 也无法触发
JavaScript 动态添加类时 hover 失效？别混用交互控制方式
如果用 JS 给元素加 is-hovered 类来模拟 hover 效果，但同时又保留原生 :hover 规则，容易出现状态冲突或过渡链断裂。CSS 的 :hover 是用户代理触发的伪类，JS 添加的类属于普通类，两者不联动。
立即学习“前端免费学习笔记（深入）”；
- 纯 CSS 场景下，坚持用
:hover+transition，不要 JS 干预状态 - 需要 JS 控制（如触摸设备兼容、延迟触发），就彻底放弃
:hover，改用.is-active或.is-hovering类，并在 JS 中手动 add/remove - 移动端无 hover，
@media (hover: hover)可做条件隔离，但别指望它修复桌面端的过渡问题
真正卡住的地方往往不在 transition 语法本身，而在初始值缺失、选择器隐性覆盖、或把 hover 当成 JS 状态来用。打开 DevTools 看一眼 computed 值，比反复改代码更快。
