Bootstrap怎么修改Dropdown项在鼠标悬停时的背景及文字颜色方案-Bootstrap教程-PHP中文网

应优先通过css变量（如--bs-dropdown-link-hover-bg）覆盖bootstrap 5+的悬停样式，而非直接写.dropdown-item:hover规则；需确保css在bootstrap后加载，并同步处理:focus、:visited及深色模式、移动端适配。

bootstrap怎么修改dropdown项在鼠标悬停时的背景及文字颜色方案

直接改 `.dropdown-item:hover` 为什么颜色没变

不是 CSS 没写对，而是 Bootstrap 5+ 默认用 CSS 变量（如 --bs-dropdown-link-hover-bg 和 --bs-dropdown-link-hover-color）控制悬停样式，你写的 .dropdown-item:hover { background-color: red; color: white; } 很可能被变量值覆盖——浏览器开发者工具里能看到该规则被划掉，说明权重不够或变量劫持了渲染。

优先用 CSS 变量统一改，而不是硬写 hover 规则

改变量更稳，能自动同步到 :focus、深色模式切换、甚至未来版本新增的状态（比如 :active 或动画过渡）。但必须确保你的 CSS 在 Bootstrap 之后加载。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

全局改（影响所有下拉菜单）：

:root { --bs-dropdown-link-hover-bg: #007bff; --bs-dropdown-link-hover-color: #fff; }

局部改（只作用于某个导航栏）：

.my-navbar .dropdown-menu { --bs-dropdown-link-hover-bg: #2c3e50; --bs-dropdown-link-hover-color: #ecf0f1; }

深色模式下需单独覆盖：

@media (prefers-color-scheme: dark) { :root { --bs-dropdown-link-hover-bg: #34495e; --bs-dropdown-link-hover-color: #bdc3c7; } }

必须同步处理 `:focus` 和 `:visited` 状态

只改 hover，键盘用户 Tab 进去时文字/背景还是默认色；如果 .dropdown-item 是 <a></a> 标签，第二次点击会触发浏览器默认的紫色 :visited 样式，导致颜色跳变。

.dropdown-item:focus 必须和 hover 保持一致，否则可访问性不达标
.dropdown-item:visited 和 .dropdown-item.active:visited 都要显式重置，否则 Chrome/Firefox 下二次点击后背景或文字色会回退
若用了 dropdown-menu-dark，它会重设变量，得在 .dropdown-menu-dark 下再写一遍变量覆盖