直接改--bs-dropdown-link-hover-color变量最稳，bootstrap 5.2+用该变量统一控制悬停文字色，自动适配深色模式、主题切换及焦点态联动；需同步设置--bs-dropdown-link-focus-color，并在dropdown-menu-dark下单独覆盖以确保全场景生效。
直接改 --bs-dropdown-link-hover-color 变量最稳
Bootstrap 5.2+ 用 CSS 变量接管了悬停文字色，硬写 .dropdown-item:hover { color: #fff; } 大概率被覆盖——不是你 CSS 没加载，而是变量值在背后“劫持”了渲染。改 --bs-dropdown-link-hover-color 才是源头解法，它自动适配深色模式、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下再设一遍，不能只靠:root
.dropdown-item:hover 加 !important 有时才生效？
加 !important 是绕过变量机制的“钉死”操作，短期能修好，但埋坑明显：
- 后续 Bootstrap 升级新增的 hover 动画、阴影等效果会被锁死
- 深色主题切换时 JS 动态改
:root变量完全失效，而!important规则照常执行 - 移动端 touch 设备无 hover，这类样式白占解析资源，还可能干扰伪类优先级链
- 真正容易被忽略的是：浏览器开发者工具里看到
--bs-dropdown-link-hover-color值仍是 Bootstrap 默认值（如#212529），说明变量根本没被覆盖——立刻检查 CSS 加载顺序或是否被dropdown-menu-dark类拦截
为什么只改悬停色，键盘用户还是看不到反馈？
很多人调完鼠标悬停就以为完了，结果键盘用户按 Tab 时文字还是默认色——因为 :hover 和 :focus 是两个独立状态，CSS 不会自动同步。
-
.dropdown-item:hover控制鼠标移入，.dropdown-item:focus控制键盘聚焦，必须显式写两遍 - 若下拉项是
<a></a>标签，还得覆盖.dropdown-item:focus:visited，否则已访问链接点击后颜色跳变 - 别漏掉
dropdown-menu-dark下的:focus：深色菜单里:focus状态默认用另一套变量，单独写规则才能生效 - 移动端真机测试不能跳过：Android Chrome 常把点击映射为 focus，iOS 可能延迟触发，颜色不同步就说明没覆盖全
检查是否生效的最快方式
打开浏览器开发者工具（F12），选中任意一个 .dropdown-item 元素，在 Styles 面板搜索 --bs-dropdown-link-hover-color：
- 看到的值是你设的（比如
#ffffff），说明变量覆盖成功 - 看到的是 Bootstrap 默认值（如
#212529），立刻检查 CSS 加载顺序或选择器作用域是否被dropdown-menu-dark等类拦截 - 真正容易被忽略的是：悬停色和焦点色必须同步更新，且
dropdown-menu-dark不是开关，而是一套独立变量重置逻辑——只设一次:root，在深色菜单里照样无效
