按钮 hover 颜色无过渡，主因是未声明 transition 或颜色值类型不一致；须明确指定 color/background-color 过渡属性，统一用 rgba 避免插值失败，并排查样式覆盖与状态干扰。
按钮 hover 时颜色不过渡，通常是因为没加 transition，或者用了不支持过渡的颜色写法（比如直接用十六进制改色但没设初始 transition 属性），又或者颜色值类型不一致（如从 #fff 切到 rgba(0,0,0,0.8)，浏览器无法插值）。
确保 transition 正确绑定在 color / background-color 上
transition 不会自动作用于所有属性，必须明确指定要过渡的属性：
- 如果改的是背景色，就写
transition: background-color 0.3s ease; - 如果改的是文字色，就写
transition: color 0.3s ease; - 若同时改两者，可合并：
transition: color 0.3s ease, background-color 0.3s ease;
用 rgba 统一颜色模型，避免类型断层
十六进制（#3498db）和 rgba（rgba(52, 152, 219, 1)）本质不同，浏览器无法在它们之间做平滑插值。解决方法是：初始状态和 hover 状态都用 rgba()，只变其中的 alpha 或 RGB 值。
例如：
立即学习“前端免费学习笔记（深入）”；
.btn {
background-color: rgba(52, 152, 219, 1);
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: rgba(41, 128, 185, 1); /* 仅调深 RGB，透明度不变 */
}需要渐变透明效果？控制 alpha 值即可
想实现“半透 → 完全不透”或“实色 → 淡出”，就固定 RGB、只变第四个参数（alpha）：
- 初始：
background-color: rgba(52, 152, 219, 0.8); - hover：
background-color: rgba(52, 152, 219, 1);
这样过渡自然，且兼容所有现代浏览器。
检查是否被其他样式覆盖或继承干扰
有时 hover 效果失效，是因为：
- CSS 优先级不够（比如被
!important或更具体的规则覆盖） - 父元素设置了
overflow: hidden或transform导致层叠上下文异常 - 按钮本身是
disabled状态，:hover 不触发
可用浏览器开发者工具检查 computed 样式，确认 hover 下 background-color 是否真被应用、transition 是否生效。
基本上就这些。核心就是：写对 transition、统一用 rgba、检查样式优先级。不复杂但容易忽略细节。
