按钮悬停时 background-color 不生效，主要因选择器优先级不足或被其他样式覆盖；需用开发者工具检查、避免复合属性覆盖、显式声明 transition 且置于常态规则中，并考虑深色模式适配。
按钮悬停时 background-color 不生效？检查是否被其他样式覆盖
最常见的问题是 :hover 写了，但 background-color 看不到变化——大概率是选择器优先级不够，或者被更具体的规则（比如内联样式、!important、或父级 background 复合属性）压住了。
- 用浏览器开发者工具（F12）点中按钮，看「Styles」面板里
:hover对应的background-color是否被划掉；如果被划掉，说明被更高优先级样式覆盖 - 避免用
background: #fff这种复合写法覆盖掉单独设置的background-color；改用background-color: #fff显式声明 - 如果按钮有
border或box-shadow，记得一并考虑它们在悬停时是否需要同步变化，否则视觉会突兀
:hover 伪类必须作用于可交互元素，且不能嵌套在其他伪类里
只写 如果项目启用了 立即学习“前端免费学习笔记（深入）”；:hover 是 CSS 伪类，不是函数也不是变量，它只对支持鼠标的元素（如 、、
.btn:hover() { ... }（括号是 JS 函数写法，CSS 里非法）.btn:active:hover { ... }（多个用户行为伪类不能链式叠加）:hover 支持有限，默认不触发，需配合 touchstart 事件或使用 @media (hover: hover) 做条件判断background-color 过渡要加 transition 才平滑
:hover { background-color: #007bff; } 会让颜色瞬间切换，体验生硬。必须显式声明 transition 属性才能有渐变效果：button {
background-color: #0056b3;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #007bff;
}
transition 必须写在「常态」规则里（即非 :hover 的那条），否则第一次悬停不会动效background-color，比写 transition: all 0.2s 更安全——避免意外过渡到 padding、font-size 等不该变的属性0.15s ~ 0.3s，太短像没动，太长让人觉得卡顿深色模式下 hover 颜色可能需要重定义
@media (prefers-color-scheme: dark)，而你只在默认样式里设了 :hover，那么深色模式下悬停色很可能和背景混在一起（比如浅灰按钮配浅灰悬停）。
实际写的时候，最常漏掉的是 button:hover { background-color: ... }
CSS 自定义属性 统一管理主题色，例如：--hover-bg: #007bff;，然后在不同主题里覆盖该变量transition 声明和优先级排查。hover 效果看着简单，但一旦和其他组件样式交叉，就很容易变成“写了却看不见”的隐形 bug。
