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

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; /* ✅ 只动这一行 */}

移动端和可访问性不能只靠 hover

iOS Safari 默认不触发 :hover，这不是 bug，是规范行为；屏幕阅读器也不会感知纯 :hover 变化。

• 关键交互别依赖 hover，比如“悬停显示菜单” → 改用 :focus 或 JS 控制显隐
• 若必须用，加 tabindex="0" 让键盘用户也能聚焦触发
• 兼容性兜底可写：@media (hover: hover) { .item:hover { ... } }

真正难的不是写几行 CSS，而是判断什么时候该放弃 background-image 过渡、什么时候该换交互方式——这些边界比语法本身更影响最终效果。