Bootstrap 5 下拉项 hover 背景色定义在 components/dropdowns.scss，编译为 .dropdown-item:hover，使用 CSS 变量 --bs-dropdown-link-hover-bg（默认 #e9ecef）；直接覆盖需用 !important、提高选择器权重或提前重定义该变量。
Bootstrap下拉菜单的:hover样式在哪定义的
Bootstrap 5 的下拉项（.dropdown-item）默认 hover 背景色来自 components/dropdowns.scss，最终编译为 .dropdown-item:hover 规则，背景色是 var(--bs-dropdown-link-hover-bg)（默认值为 #e9ecef）。你不能靠简单加个 .dropdown-item:hover { background: red } 就生效——因为 Bootstrap 的 CSS 权重高，且用了 CSS 变量 + :hover 组合。
覆盖.dropdown-item:hover背景色的三种可靠方式
必须确保你的样式能压过 Bootstrap 原生规则。推荐按优先级顺序尝试：
- 用
!important（最直接，适合快速验证或小范围覆盖）：.dropdown-item:hover { background-color: #0d6efd !important; } - 提高选择器权重：加父容器类或用
.dropdown-menu .dropdown-item:hover，比原生.dropdown-item:hover多一个层级 - 在 Bootstrap 变量层面覆盖：在引入 Bootstrap CSS 前，重定义
--bs-dropdown-link-hover-bg，例如：:root { --bs-dropdown-link-hover-bg: #0d6efd; }注意：这会影响所有使用该变量的组件，不单是下拉项
为什么直接写.dropdown-item:hover有时无效
常见失效原因有三个：
- CSS 加载顺序错：你的样式表在 Bootstrap 之后加载，但被其他更高权重规则（比如
.navbar .dropdown-item:hover）覆盖了 - 用了 SCSS 但没重新编译：如果你改的是
_variables.scss里的$dropdown-link-hover-bg，但没运行sass编译，新值根本不会进 CSS - Bootstrap 版本差异：v4 用的是
$dropdown-link-hover-bg变量，v5 改用 CSS 自定义属性--bs-dropdown-link-hover-bg，混用会导致覆盖失败
自定义时要注意的边界情况
下拉项不是只有 hover 才有背景变化，还要同步考虑：
立即学习“前端免费学习笔记（深入）”；
- 聚焦态（
:focus）和激活态（:active）是否也要统一颜色？否则键盘用户 tab 进去会看到突兀的默认灰底 - 禁用项（
.dropdown-item.disabled）的 hover 不应触发，但有些粗放覆盖会误伤它，建议显式排除：.dropdown-item:not(.disabled):hover { ... } - 深色模式下如果用了
@media (prefers-color-scheme: dark)，得单独再覆盖一遍变量或规则，否则 hover 色可能反白刺眼
真正麻烦的不是改一行 background，而是让 hover、focus、active、disabled、暗色模式全保持一致又不破坏可访问性。改完记得用键盘 tab 测试一遍焦点路径。
