根本原因是Bootstrap 5对.nav-link悬停样式采用高权重选择器（如.navbar-nav .nav-link:hover）且CSS加载顺序不当；需确保自定义CSS在Bootstrap后加载，并用匹配的选择器加!important覆盖，同时兼顾深色模式。
导航栏链接悬停颜色不生效的常见原因
Bootstrap 5 默认对 .nav-link 的悬停样式做了较严格的优先级控制，直接写 a:hover { color: red; } 很可能被覆盖。根本原因是 Bootstrap 使用了 :not(.disabled) 和 .nav-link:hover 组合选择器，并带 !important（仅在部分主题变体中），同时其 CSS 文件加载顺序也影响层叠结果。
- 确保你的自定义 CSS 在 Bootstrap CSS 之后加载
- 避免只用
a:hover，必须匹配 Bootstrap 的选择器结构（如.navbar-nav .nav-link:hover） - 如果用了
data-bs-theme="dark"，还要注意暗色模式下.navbar-dark的额外规则
覆盖默认悬停色的推荐写法（含 dark 模式兼容）
最稳妥的方式是复现 Bootstrap 的选择器权重，并分别处理亮/暗主题：
.navbar-light .navbar-nav .nav-link:hover {
color: #dc3545 !important; /* 例如改为红色 */
}
.navbar-dark .navbar-nav .nav-link:hover {
color: #ffc107 !important; /* 暗色主题下用亮黄色 */
}
-
!important在这里不是“坏习惯”，而是应对 Bootstrap 内联或高权重规则的必要手段 - 不要省略
.navbar-light或.navbar-dark前缀，否则在切换主题时会失效 - 若导航栏没加
navbar-light或navbar-dark类，Bootstrap 5 会按父容器推断，但显式声明更可靠
用 CSS 变量动态控制悬停色（Bootstrap 5.3+）
Bootstrap 5.3 起支持通过 CSS 自定义属性统一管理主题色，可避免硬编码颜色值：
:root {
--bs-navbar-hover-color: #20c997;
}
/* 或针对特定 navbar */
.my-navbar {
--bs-navbar-hover-color: #6f42c1;
}
.my-navbar .nav-link:hover {
color: var(--bs-navbar-hover-color) !important;
}
-
--bs-navbar-hover-color并非 Bootstrap 官方预设变量，需自行定义并引用，但它能和var()配合实现主题解耦 - 此方式适合多主题项目，但要注意：Bootstrap 本身未将悬停色纳入其核心变量体系，所以仍需手动绑定到
.nav-link:hover
为什么用 JavaScript 动态改色通常没必要
有人尝试用 addEventListener('mouseover') 去改 style.color，这会带来三个实际问题：
- 覆盖掉 CSS 过渡动画（
transition: color .15s默认启用） - 无法响应键盘焦点（
:focus）或暗色模式切换 - 每个
.nav-link都要单独绑定，维护成本远高于一行 CSS
纯 CSS 方案已足够灵活，除非你有极特殊的交互逻辑（比如悬停时同时触发 API 请求），否则不要绕路。
真正容易被忽略的是：如果导航栏嵌套在 .navbar-collapse 里（即移动端折叠菜单），悬停样式在小屏幕上默认不触发——因为折叠状态下的菜单项是隐藏的，用户实际看到的是点击展开后的 .dropdown-menu，那里的悬停规则属于 .dropdown-item，和 .nav-link 无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
