自定义Bootstrap按钮悬停背景色方法

Bootstrap 5中按钮悬停背景色失效，往往不是代码写错了，而是被:focus或:active状态样式覆盖、CSS特异性不足、深色模式未适配，或忽略了Sass变量的源头定制；本文直击痛点，教你用开发者工具精准定位生效伪类，通过合理提升选择器权重（如`.btn.my-btn:hover`）、统一三态样式、响应式适配深色模式（结合`hsl()`或媒体查询），以及终极方案——在Sass编译链中修改`$theme-colors`变量，实现真正可靠、可维护、全场景兼容的自定义按钮悬停效果。

Bootstrap 5 按钮 hover 背景色不生效？优先检查是否覆盖了 :focus 和 :active

直接写 .btn:hover { background-color: #ff6b35 !important; } 很可能没反应——因为 Bootstrap 5 的 .btn 默认同时定义了 :hover、:focus、:active 三态，且部分变体（如 .btn-primary）的 :focus 样式带 box-shadow 和背景微调，视觉上会“盖过” hover 效果。更关键的是，某些版本中 :focus 的权重高于 :hover，导致悬停时焦点态样式仍被触发。

实操建议：

• 用浏览器开发者工具检查按钮实际生效的伪类规则，确认是 :hover 还是 :focus 在主导颜色变化
• 若需统一悬停/聚焦/点击时的背景色，应同时覆盖三者：

  .my-btn:hover,
  .my-btn:focus,
  .my-btn:active {
    background-color: #ff6b35 !important;
  }

• 避免全局污染，给按钮加自定义 class（如 class="btn btn-primary my-btn"），而非直接修改 .btn-primary:hover

使用 !important 是权宜之计，真正可靠的写法是提高 CSS 选择器特异性

Bootstrap 的原生规则如 .btn-primary:hover 特异性为 0,2,1（类名 ×2 + 伪类 ×1）。如果只写 .my-btn:hover（0,1,1），即使加 !important 也容易在后续升级或引入其他 CSS 框架时失效。

更稳妥的做法：

• 复用 Bootstrap 的层级结构，例如：

  .btn.my-btn:hover,
  .btn.my-btn:focus,
  .btn.my-btn:active {
    background-color: #ff6b35;
  }

  （特异性升至 0,2,1，与原生一致）
• 或进一步强化：

  button.my-btn:hover,
  button.my-btn:focus,
  button.my-btn:active {
    background-color: #ff6b35;
  }

  （0,3,1，稳压原生规则）
• 如果按钮是 标签，记得对应写 a.my-btn:hover，否则不匹配

深色模式下 hover 颜色异常？必须显式处理 @media (prefers-color-scheme: dark)