直接改--bs-dropdown-link-hover-bg变量最稳,需在:root或作用域内重设并确保css在bootstrap之后加载,同时同步设置--bs-dropdown-link-focus-bg和--bs-dropdown-link-active-bg以保持视觉一致。

直接改 --bs-dropdown-link-hover-bg 变量最稳
Bootstrap 5.2+ 默认用 CSS 变量控制悬停背景色,硬写 .dropdown-item:hover { background-color: ... } 容易被变量覆盖。浏览器开发者工具里能看到样式被划掉,不是你写错了,而是变量值优先级更高。
推荐在 :root 或作用域内重设变量:
-
:root { --bs-dropdown-link-hover-bg: #007bff; }—— 全局生效,影响所有.dropdown-item -
.my-nav .dropdown-menu { --bs-dropdown-link-hover-bg: #3498db; }—— 局部生效,避免污染按钮下拉、表单下拉等其他场景
注意:如果项目用 Sass 编译,且已定义 $dropdown-link-hover-bg,那它会覆盖 CSS 变量——先检查你自己的 _variables.scss。
.dropdown-item:hover 为什么加了 background-color 还是没变
常见失效原因就三个:
- CSS 文件加载顺序在 Bootstrap 之前,变量没被覆盖
- 实际渲染的是
.navbar-light .dropdown-menu .dropdown-item:hover这类高权重选择器,你写的.dropdown-item:hover权重不够 - 用了
.dropdown-menu-dark,但只改了浅色模式下的规则,深色模式下仍走默认变量值
验证是否生效:打开 F12 → 选中一个 .dropdown-item → 在 Styles 面板搜 --bs-dropdown-link-hover-bg,看到的值是你设的才算成功。
别漏掉 :focus 和 .active 状态
只改悬停背景,但留着默认的 :focus 或 .active 样式,会导致键盘用户 Tab 进去时颜色突变,鼠标点击后又跳一下,体验割裂。
-
--bs-dropdown-link-focus-bg必须同步设,否则键盘导航无反馈 -
--bs-dropdown-link-active-bg也要一致,否则点击瞬间背景色不连贯 - 如果用了
.dropdown-menu-dark,得在它下面再设一遍变量,或用@media (prefers-color-scheme: dark)单独处理
移动端 hover 不触发,但 focus 可能意外残留
真机测试不能跳过:Android Chrome 常把点击映射为 focus,iOS 则可能延迟触发 focus,导致悬停色和焦点色切换不同步。
最稳妥的做法是三者统一:
- 悬停态用
--bs-dropdown-link-hover-bg - 焦点态用
--bs-dropdown-link-focus-bg - 激活态用
--bs-dropdown-link-active-bg
变量名看着多,但只要设成同一色值,视觉就一致;而硬写选择器容易漏状态,反而更难维护。











