color过渡常失效是因为起点或终点颜色值不明确，浏览器无法插值；需确保默认状态和:hover中均显式声明具体可计算的颜色值（如#333、rgb()），避免transparent/inherit/未声明，并将transition写在默认状态而非:hover中。
直接加 transition: color 0.3s 很可能没效果——起点或终点颜色值不明确，浏览器根本没法插值。
为什么 color 过渡常失效
浏览器需要两个确定的、可计算的颜色值才能做过渡：一个是默认状态下的 color，另一个是 :hover 里声明的新值。如果其中一个是 transparent、unset、inherit（未被明确解析为具体色值）或压根没写，过渡就静默失败。
- 常见错误：
button { transition: color 0.3s; }+button:hover { }——:hover里漏了color声明 - 命名色如
red在旧版 Safari 或 Android WebView 中可能无法插值，优先用#ff0000、rgb(255, 0, 0)或hsl(0, 100%, 50%) - 父级用了
transform或opacity，某些 iOS Safari 版本（尤其是 iOS 14 及更早）会干扰子元素的color过渡
transition 写在哪、怎么写才真正起作用
必须在默认状态（非 :hover）中定义 transition，并在 :hover 中显式改写目标属性。不要把 transition 放进 :hover 规则里——它只控制“变化过程”，不是“触发条件”。
- 正确写法：
button { color: #333; transition: color 0.25s ease-in-out; }+button:hover { color: #007bff; } - 避免简写覆盖：
button { background: #fff; }会清掉单独设的background-color，同理，color也要独立声明，别依赖继承 - 想让鼠标移出时更快恢复？可以分开控制：
button { transition: color 0.15s linear; }，button:hover { transition: color 0.25s ease-in-out; }（注意：这是合法的，且能解决快速进出导致的残留帧问题）
移动端悬停动画要多加一行 cursor: pointer
iOS Safari 对 :hover 支持极弱，默认只有真点击（tap）才触发伪类。加 cursor: pointer 是一种兼容性提示，部分 WebView 和较新 Safari 会据此启用 hover 检测逻辑。
立即学习“前端免费学习笔记（深入）”；
- 必须写在默认状态：
button { cursor: pointer; color: #333; transition: color 0.25s; } - 仅靠
cursor: pointer不保证所有 iOS 设备都生效，但不加基本等于放弃 - 深色模式下，确保
:hover的颜色也是具体值（比如color: #666），别只靠@media (prefers-color-scheme: dark)动态切 class
最容易被忽略的是：过渡是否真的在「动」，得看起点和终点都是浏览器能算出 RGB 值的颜色。哪怕只是临时写个 color: inherit 在 :hover 里，也比留空强——因为至少它把起点锚定了。
