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）。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

• 确保「常态」规则中已声明将要变化的属性，哪怕值是默认的：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 值，比反复改代码更快。