Bootstrap下拉菜单默认不支持hover触发，因其依赖JavaScript控制显隐以保障移动端兼容性和可访问性；需通过CSS强制接管显示逻辑，并为触摸设备和键盘用户保留JS fallback。
直接覆盖 .dropdown-item:hover 最有效
bootstrap 默认用 --bs-dropdown-link-hover-bg 变量控制悬停背景，但直接写 .dropdown-item:hover { background-color: #007bff; } 很可能不生效——因为 bootstrap 的原始规则权重更高，且用了变量。最稳妥的做法是提高选择器精度或加 !important。
- 推荐写法：
.dropdown-menu .dropdown-item:hover { background-color: #e3f2fd !important; }（加父级限定 + 强制覆盖） - 如果只改某一个下拉菜单，给它加自定义类如
my-nav-dropdown，再写.my-nav-dropdown .dropdown-item:hover - 别漏掉焦点态：
.dropdown-item:focus和.dropdown-item:active也要同步设，否则键盘用户 tab 进去时背景突变
用 CSS 变量统一管理更可持续
Bootstrap 5.3+ 支持 --bs-dropdown-link-hover-bg，全局改一次就能影响所有 .dropdown-item:hover。但要注意：这个变量只在启用 CSS 变量支持的构建中生效（比如未禁用 Sass 变量注入）。
- 全局改法：
:root { --bs-dropdown-link-hover-bg: #e3f2fd; } - 局部改法：在特定容器上设，比如
.navbar .dropdown-menu { --bs-dropdown-link-hover-bg: #3498db; } - 深色模式需单独处理：
@media (prefers-color-scheme: dark) { :root { --bs-dropdown-link-hover-bg: #2c3e50; } }
移动端和可访问性容易被忽略
iOS Safari 对 :hover 支持极弱，很多设备必须点一下才触发，纯 hover 样式在真机上基本不可靠。同时，仅靠 hover 不满足 WCAG 2.1 的焦点可见性要求。
- 必须补
:focus和:active，顺序不能错：先:hover，再:focus，最后:active - 如果菜单项是
<a></a>或<button></button>，确保有tabindex="0"（对<div> 尤其关键） <li>别用纯色块做悬停反馈——考虑加轻微 border 或 shadow 变化，兼顾触控和键盘用户</li> <h3>为什么改了还是白底？三个高频失效点</h3> <p>常见现象是写了样式但 DevTools 里看到 <code>background-color被划掉，真正生效的是 Bootstrap 自带规则。根本原因往往不是代码写错，而是加载顺序、选择器冲突或模式误判。-
.dropdown-menu被.navbar-light .dropdown-menu这类高权重规则覆盖，得写成.navbar-light .dropdown-menu .dropdown-item:hover - 你实际用的是 collapse 模式（
data-bs-toggle="collapse"），但改了.dropdown-item:hover——此时根本没有.dropdown-item，得改.navbar-collapse.show .nav-link:hover - 自定义 CSS 文件在
bootstrap.min.css之前引入，规则被覆盖；检查 HTML 中<link>顺序
-
