如何移除Bootstrap nav-link hover背景色并仅修改文字颜色？

问题分析 #

Bootstrap默认给.nav-link的hover状态设置了背景色，且默认样式的选择器优先级可能高于你自定义的CSS规则，导致你设置的transparent背景不生效。

解决方案 #

通过提升选择器优先级或强制覆盖的方式，修改hover状态的样式，仅调整文字颜色并将背景设为透明：

基础覆盖方案（适用于大多数场景） #

.navbar-nav .nav-link:hover {
  background-color: transparent;
  color: #007bff; /* 替换为你想要的hover文字颜色 */
}

优先级强化方案（无需!important） #

如果上述代码不生效，可结合导航栏的父元素ID/类提升选择器优先级：

/* 假设你的导航栏ID为"mainNav" */
#mainNav .navbar-nav .nav-link:hover {
  background-color: transparent;
  color: #007bff;
}

强制覆盖方案（使用!important） #

若仍有样式冲突，可使用!important强制生效：

.navbar-nav .nav-link:hover {
  background-color: transparent !important;
  color: #007bff !important;
}

关键注意事项 #

• 加载顺序：确保你的自定义CSS文件在Bootstrap的CSS文件之后引入，这样自定义样式才能覆盖默认样式。
• 开发者工具排查：按F12打开浏览器开发者工具，查看.nav-link:hover的样式面板，确认你的自定义规则是否被应用，若被划掉则说明优先级不足，需要调整选择器。

内容的提问来源于stack exchange，提问作者Ben Nguyen