transition必须写在非hover规则中，如.btn { color: #333; transition: color 0.25s ease; }，再配合.btn:hover { color: #e74c3c; }才能实现首次悬停即平滑过渡；若仅在:hover中声明transition，首次无效，且颜色值需同构（如均用hsl()或rgba()）以确保可插值。

transition 必须写在非 hover 规则里

只在 .btn:hover { color: red; } 里加 transition 没用——第一次悬停不会动，后续才生效。浏览器只在状态切换时触发过渡，而初始渲染时没“前一状态”可插值。

• 正确写法：.btn { color: #333; transition: color 0.25s ease; }，再写 .btn:hover { color: #e74c3c; }
• 时间值别设成 0s 或负数，否则退化为硬切；0.15s–0.4s 是人眼可辨又不拖沓的区间
• 避免对整个容器（如 body）设 transition: all，容易引发意外重绘和性能抖动

颜色值必须可插值才能平滑过渡

color: red → color: #ff0000 看似一样，但部分旧浏览器会当作不同格式处理，导致跳变；color: #f00 → color: transparent 更糟——两者无法线性插值，浏览器直接硬切。

• 统一用 rgb()、rgba() 或 hsl()，例如：color: hsl(200, 100%, 50%); → color: hsl(240, 100%, 50%);
• 若涉及透明度变化，两个状态都得用 rgba()，比如 rgba(0,0,0,1) → rgba(0,0,0,0.7)
• 避开命名色（red、blue）和十六进制混用，尤其在需要兼容 IE11 或旧版 Safari 的项目中

:hover 在移动端基本不可靠

iOS Safari 和 Android Chrome 的触摸设备上，:hover 不是稳定交互信号：它可能只在模拟桌面模式下触发，或在 touchstart 后短暂生效，且无明确触发时机保证。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 关键按钮别只靠 :hover 显示重要信息（比如操作说明、二级菜单入口）
• 触控主路径应改用 :focus 或 :active，例如：.btn:focus { color: #2980b9; transition: color 0.2s; }
• 如需双模支持（悬停+点击），用 JS 监听 touchstart 并临时加 class，而非依赖纯 CSS

文字变色被父级样式覆盖怎么办

常见失效不是代码写错，而是层叠规则压倒了你的 :hover，尤其当父容器用了 color: inherit 或子元素带 !important。

立即学习“前端免费学习笔记（深入）”；

• 检查开发者工具的 “Computed” 面板，看最终生效的 color 来自哪条规则
• 若父级有 !important，子元素 :hover 也得加同等权重，比如把选择器从 .text 升级为 div .text:hover
• 避免给文字容器设 filter（如 grayscale）或 opacity，这些会干扰颜色视觉呈现，先关掉验证是否真没变

实际最常被忽略的点是：过渡动画的起点（默认状态）颜色格式和终点（hover 状态）必须同构，且 transition 声明位置不能错——这两处出问题，效果就只是“闪一下”，而不是“滑过去”。