直接修改 .dropdown-item:hover 的 background-color 无效，因 bootstrap 5+ 使用 css 变量 --bs-dropdown-link-hover-bg 控制悬停背景色，需通过该变量设置透明度，且需注意加载顺序、选择器权重、深色模式适配及移动端 :hover 不生效等问题。
直接改 .dropdown-item:hover 的 background-color 无效？
不是你写错了，而是 Bootstrap 5+ 默认用 CSS 变量 --bs-dropdown-link-hover-bg 控制悬停背景色，硬写 background-color: rgba(0,0,0,0.1) 会被变量值覆盖。开发者工具里能看到你的声明被划掉，真正生效的是变量计算后的纯色值。
必须用 --bs-dropdown-link-hover-bg 变量改透明度
推荐在 :root 或项目全局样式开头设置：
:root {
--bs-dropdown-link-hover-bg: rgba(0, 0, 0, 0.08);
}
注意三点：
-
--bs-dropdown-link-hover-bg只影响.dropdown-item:hover背景，不控制文字色（文字色由--bs-dropdown-link-hover-color管） - 如果用了 Sass 编译，且已定义了
$dropdown-link-hover-bg，它会覆盖这个 CSS 变量——先查你自己的_variables.scss - 深色模式下该变量默认不自动适配，需配合
@media (prefers-color-scheme: dark)单独设值
为什么加了 !important 还没反应？
常见卡点有三个：
- CSS 文件加载顺序在 Bootstrap 之前，变量被后加载的默认样式覆盖
- 实际渲染用的是高权重选择器，比如
.navbar-light .dropdown-menu .dropdown-item:hover，你写的.dropdown-item:hover权重不够 - 用了
.dropdown-menu-dark类，但只改了浅色模式变量，深色模式仍走默认值
移动端悬停背景透明度要单独处理
Android 和 iOS 不支持 :hover 伪类（或仅在模拟焦点时触发），所以真机上根本不会显示你设的透明悬停背景。这不是 bug，是规范行为。
解决方案只有两个：
- 放弃悬停态，统一用
:active+:focus组合（更可靠） - 若必须视觉反馈，改用 JS 监听
touchstart/touchend动态加 class，再配对应样式
别指望 rgba() 悬停背景能在所有设备上一致生效——这是最常被忽略的兼容性盲区。
