用transition属性可实现悬停颜色平滑变化，需在基础状态定义初始色与transition: color 0.3s ease，再在:hover中设目标色；避免用all、慎用delay，兼顾性能、响应性与可访问性。
用 transition 属性就能让悬停颜色变化平滑自然，避免生硬跳变。
给颜色变化加过渡效果
CSS 中的 transition 可以控制属性变化的速度和方式。只要在基础状态（非悬停）里设置好，悬停时颜色就会自动缓动：
- 推荐写法：
transition: color 0.3s ease; -
color表示只对文字颜色做过渡；也可写all 0.3s ease对所有可动画属性生效（但不推荐，可能影响性能或意外动效） -
0.3s是持续时间，常用范围是 0.2s–0.4s，太长显迟钝，太短仍像突兀 -
ease是缓动函数，比默认的ease更柔和；想更自然可用ease-out或cubic-bezier(0.25, 0.46, 0.45, 0.94)
确保悬停前后都定义了颜色
如果只在 :hover 里写了颜色，而默认状态没设（比如靠浏览器默认或继承），过渡可能不触发或表现异常：
- 务必在正常状态就明确写出初始颜色，例如：
a { color: #333; transition: color 0.3s ease; } - 再写悬停态：
a:hover { color: #007bff; } - 背景色、边框色等同理，要成对定义才可过渡
避免过渡干扰交互反馈
过渡本身不该掩盖用户意图，尤其在快速进出时：
立即学习“前端免费学习笔记（深入）”；
- 慎用
transition-delay，它会让悬停响应变慢，降低可用性 - 如果元素有多个状态（如禁用、聚焦），每个都要单独测试过渡是否合理
- 深色模式下注意颜色对比度变化是否仍满足可读性，过渡不能牺牲可访问性
过渡不是加得越多越好，精准控制变化属性+合理时长+恰当缓动，才能让悬停既灵敏又舒服。
