应优先覆盖 CSS 变量 --bs-dropdown-link-hover-color 和 --bs-dropdown-link-focus-color,而非直接修改 color;需在 :root 或特定选择器中设置,并在 .dropdown-menu-dark 下单独重设,以确保深色模式和可访问性兼容。

直接改 .dropdown-item:hover { color: #fff; } 大概率没反应——不是 CSS 没加载,而是 Bootstrap 5.2+ 用 CSS 变量接管了悬停文字色,硬写 color 会被变量覆盖。
优先覆盖 --bs-dropdown-link-hover-color 变量
Bootstrap 内部所有悬停文字色都由这个变量驱动,改它一劳永逸,且自动适配深色模式、焦点态、JS 主题切换等场景。
- 全局修改(推荐):在
:root或body中重设,确保你的 CSS 文件在 Bootstrap 的 CSS 之后引入 - 局部修改:给特定下拉菜单加自定义类(如
my-nav-dropdown),再写.my-nav-dropdown .dropdown-menu { --bs-dropdown-link-hover-color: #2c3e50; } - 别漏掉
--bs-dropdown-link-focus-color:键盘用户Tab进入时颜色必须一致,否则可访问性不达标 - 如果用了
dropdown-menu-dark,它会重置变量,得额外在.dropdown-menu-dark下再设一遍
为什么 !important 有时才生效
因为 !important 绕过了变量机制,强行把 color 值“钉死”在样式表里。
- 短期能“修好”,但后续 Bootstrap 升级新增的 hover 动画、阴影等效果会被锁死
- 深色主题切换时 JS 动态改
:root变量完全失效,而!important规则照常执行 - 移动端 touch 设备无 hover,这类样式白占解析资源,还可能干扰伪类优先级链
检查是否生效的最快方式
打开浏览器开发者工具(F12),选中任意一个 .dropdown-item 元素,在 Styles 面板搜索 --bs-dropdown-link-hover-color:
- 看到的值是你设的(比如
#ffffff),说明变量覆盖成功 - 看到的是 Bootstrap 默认值(如
#212529),立刻检查 CSS 加载顺序或选择器作用域是否被dropdown-menu-dark等类拦截
真正容易被忽略的是:悬停色和焦点色必须同步更新,且 dropdown-menu-dark 不是开关,而是一套独立变量重置逻辑——只设一次 :root,在深色菜单里照样无效。











