文字颜色会瞬间切换，没有过渡动画，用户感知生硬；浏览器默认不启用缓动，视觉上像“闪”了一下，常见于悬停跳变、对比突兀及iOS Safari点击后残留高亮。
button:hover 里只改 color 不加 transition 会怎样
文字颜色会瞬间切换，没有过渡动画，用户感知生硬。浏览器默认不启用任何缓动，视觉上像“闪”了一下。
常见错误现象包括：悬停时文字跳变、与背景色对比突兀、移动端点击后残留高亮（尤其 iOS Safari）。
- 必须显式声明
transition: color 0.2s ease或更宽泛的transition: all 0.2s ease - 若同时改
background-color和color，建议分开写明属性，避免all意外触发其他不可控变化（比如border或box-shadow） - 不要依赖
transition: color却在 :hover 中写background—— 这会导致只有颜色过渡，背景仍瞬切
文字颜色自动适配深色/浅色背景的坑
CSS 本身不支持根据背景亮度动态计算文字色，所谓“自动适配”其实是预设两套方案手动切换，或靠 JS 计算。
纯 CSS 可行解法是用 color-scheme: light dark 配合系统偏好，但对按钮内联背景无效；更现实的做法是约定色板：
立即学习“前端免费学习笔记（深入）”；
- 浅底配深字：初始
background-color: #f9fafb→color: #1f2937；悬停background-color: #e5e7eb→color: #111827 - 深底配浅字：初始
background-color: #1f2937→color: #f9fafb；悬停background-color: #111827→color: #ffffff - 避免在
:hover中仅改color而不动背景——这常导致对比度跌破 WCAG 4.5:1 标准
移动端 touch 设备上 hover 失效的根本原因
iOS Safari 和多数安卓 WebView 在未触碰页面前不触发 :hover，且触摸后 hover 状态可能残留或延迟清除，本质是浏览器将“悬停”视为鼠标专属状态。
真实项目中不能只靠 :hover 提供反馈：
- 必须补上
:active，例如：.btn:active { transform: scale(0.98); } - 对 iOS，建议加
@media (hover: hover) and (pointer: coarse)做降级：有悬停能力且指针粗略（即平板），才启用 hover 动画 - 完全放弃 hover 的场景（如微信内嵌页），直接用
ontouchstart+ class 切换，或监听touchend清除状态
transition: color 0.3s 为什么有时没反应
最常见原因是初始和悬停状态的 color 值被继承或覆盖，导致计算出的起始/终止值相同。
排查顺序建议：
- 打开 DevTools，选中按钮，在 Styles 面板确认悬停时
color确实变了（不是被父元素color继承覆盖） - 检查是否写了
!important在初始样式里，而 hover 没加，导致优先级失效 - 确认没有其他规则通过
inherit、currentcolor或变量间接复用同一颜色值 - 某些旧版 Android 浏览器（如 UC 12.x）不支持
color过渡，需 fallback 到opacity或filter: brightness()
