a标签hover颜色跳变是因为未在基础状态（如a或a:link）中声明transition，且color过渡需避开:visited限制、避免使用text-decoration而改用border-bottom实现下划线同步变色。
直接加 transition 就能实现链接颜色平滑过渡，但必须配合伪类状态（如 :hover）使用，且只对可动画的属性生效——color 支持，text-decoration 不支持。
为什么 a:hover 颜色跳变？没写 transition
常见现象是鼠标一悬停，文字颜色瞬间切换，毫无缓动。根本原因是只写了 a:hover { color: #ff6b6b; }，却漏掉了过渡声明。
-
transition必须写在默认状态（即a或a:link）上，不能只写在:hover里 - 只写
transition: 0.3s;不够明确，建议指定属性：transition: color 0.3s ease; - 如果同时设置了
text-decoration: underline，它不会过渡，会立刻出现——这是 CSS 规范限制，不是 bug
color 过渡要和 :visited 一起考虑
浏览器强制限制：出于隐私保护，:visited 只能修改有限样式（color、background-color、border-color 等），且不能用 transition 动画已访问链接的颜色变化。
- 你可以写
a:visited { color: #6610f2; }，但加transition无效 - 为保持视觉一致性，建议
:link和:visited的color值差异不要过大，否则悬停时从:visited切到:hover会突兀 - 若需统一过渡体验，可放弃
:visited独立配色，改用同一基础色 +:hover深化处理
多状态过渡怎么写才不冲突？按标准顺序声明
CSS 伪类的层叠顺序会影响最终效果。比如 a:hover 和 a:active 同时满足时，谁的样式生效取决于书写顺序。
- 必须按
a:link→a:visited→a:hover→a:active顺序写，否则:hover可能被:visited覆盖而无法触发过渡 - 每个状态都应带
transition（哪怕只是复用同一行），例如：a, a:link, a:visited { transition: color 0.25s ease; } - 避免用
all：写transition: all 0.3s;会导致text-shadow、font-size等非预期属性也被过渡，增加渲染开销
真正容易被忽略的是：过渡是否生效，和元素是否“重绘”无关，而取决于该 CSS 属性是否在浏览器的可动画属性列表中。别试图给 display 或 visibility 加 transition——它不会动，只会卡在起点或终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
