CSS伪类:hover触发时怎样平滑改变背景颜色？

作者：袖梨 2026-07-16

background-color 是唯一能稳定过渡的背景属性，必须显式声明初始值、只改颜色、transition 写在常态样式里；hover 背景色不平滑的三大原因是 transition 写在 :hover 中、用 background 简写覆盖、初始未设 background-color。

background-color 是唯一能稳定过渡的背景属性，必须显式声明初始值、只改颜色、配 transition 写在常态样式里——否则就是突变。

为什么 hover 背景色不平滑？常见错误就这三类

不是浏览器不支持，而是写法踩了坑：

transition 写在 :hover 里 → 浏览器只对“进入 hover”做动画，“收回”时直接跳变
用 background 简写替代 background-color → 比如 background: #fff url(img.png)，后续 background-color: #000 在 hover 中会被忽略
初始状态没设 background-color → 元素靠继承或默认值渲染，浏览器无法确定“从哪开始过渡”

transition 必须写在非 hover 的基础样式中

这是最常被忽略的硬性规则。浏览器需要知道“起始状态是什么”，才能插值计算中间帧。

正确写法示例：

立即学习“前端免费学习笔记（深入）”；

.btn {  background-color: #4a6fa5;  transition: background-color 0.25s ease-in-out;}.btn:hover {  background-color: #1a3a6a;}

错误写法（无效）：

.btn {  background-color: #4a6fa5;}.btn:hover {  background-color: #1a3a6a;  transition: background-color 0.25s ease-in-out; /* ❌ 不生效 */}

用 background-image 时怎么过渡？别硬刚

原生 background-image 过渡基本不可靠：Safari 直到 16.4 才有限放开，Chrome/Firefox 行为也不一致。想“看起来像渐变过渡”，得绕开它。

主层只用 background-color 过渡（纯色）
伪元素 ::before 叠一层带透明度的微弱渐变，不加 transition
避免给伪元素加 transition，iOS Safari 容易卡顿或跳帧

结构示意：

.card {  position: relative;  background-color: #f8f9fa;}.card::before {  content: '';  position: absolute;  inset: 0;  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);  z-index: 1;}.card:hover {  background-color: #e9ecef; /* ✅ 只动这一行 */}