必须写 transition 且只能写在默认样式里，否则 hover 背景色会突变；原因在于 :hover 仅切换状态，transition 需定义在常态 css 中才能生效，且应明确属性、时长与缓动函数，并统一颜色格式（如十六进制或 rgba）以确保平滑插值。
必须写 transition，且只能写在默认样式里，否则悬停变色就是突变或根本不动。
为什么 hover 背景色“闪一下”就变过去？
这不是浏览器 bug，是没配 transition。纯 :hover 只负责切换状态，不负责动画——它默认是即时生效的。
-
transition必须写在元素的默认 CSS 块中（比如button或.btn），不能只写在:hover里 - 写成
transition: all 0.3s;看似省事，但可能意外触发box-shadow、border等属性动画，拖慢渲染 - 推荐明确指定：
transition: background-color 0.3s ease, color 0.2s ease;——不同属性响应节奏不同，分开控制更稳
背景色过渡不平滑甚至中断？
颜色值不可插值，浏览器没法算中间帧。比如 transparent 和 #007bff 混搭，过渡到一半会突然跳变。
- 统一用
rgb()、hsl()或十六进制（如#007bff），避免transparent+ 实色组合 - 想实现“渐入加深”效果，用
rgba(0, 123, 255, 0.1)→rgba(0, 123, 255, 0.9)更可靠 - 如果背景是
background-image: linear-gradient(...)，transition对它无效——得换思路，比如叠加一层带opacity的伪元素
移动端点一下才变色，或者点完还卡在 hover 状态？
这是正常行为。:hover 在触摸设备上没有“悬停”概念，规范里就没打算让它稳定工作。
- 别在移动端强依赖
:hover；真要反馈，改用:active+transition，并加touch-action: manipulation;提升响应 - 某些 iOS Safari 会在首次点击后激活
:hover，但后续可能残留状态，干扰click事件 - 若需跨端一致，用 JavaScript 监听
pointerdown/pointerup切换 class 更可控
按钮悬停时背景跳动或闪烁？
大概率不是颜色问题，而是盒模型隐式变化引发重排重绘。
- 检查悬停前后
padding、border、font-size是否一致——哪怕只差 1px，也可能导致文字重排、容器抖动 - 父容器没设
min-height或内容高度浮动时，background-color: transparent→background-color: #007bff容易触发尺寸微调 - 复杂按钮可加
will-change: background-color;（仅必要时），提示浏览器提前准备合成层，但别滥用
最常被忽略的其实是 transition 的位置和颜色格式——写错地方或混用透明/不透明色，效果就断在半路。动手前先确认这两点，比调半天动画参数管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
