如何修改Bootstrap导航栏文本的鼠标悬停颜色？

云上老周

2026-6-25

Bootstrap导航栏hover文字颜色不生效的解决办法

问题根源

你当前的代码里，导航链接同时使用了Bootstrap自带的text-white类和自定义的custom类。text-white的样式优先级会干扰hover状态的颜色设置，导致自定义的hover样式无法生效。另外要确保自定义CSS在Bootstrap CSS之后加载，这是样式覆盖的前提。

两种修复方案

方案一：提升选择器权重强制覆盖

修改CSS选择器，让其权重足够覆盖text-white的样式：

nav a {
  text-decoration: none;
}

.logo {
  height: 3rem;
}

.navbar-nav .nav-item .nav-link.custom:hover.text-white {
  color: #ffc107;
}

如果觉得选择器太冗长，也可以用!important快速解决（仅在这种特定场景推荐，避免全局滥用）：

.navbar-nav .nav-item .nav-link.custom:hover {
  color: #ffc107 !important;
}

方案二：移除`text-white`类，自定义默认颜色

这种方式更简洁，从根源避免权重冲突：

先修改HTML中的导航链接，删除所有text-white类：

<li class="nav-item mx-4">
  <a class="nav-link link display-4 custom" href="#">Nosotros</a>
</li>
<li class="nav-item mx-4">
  <a class="nav-link link display-4 custom" href="#">Servicios</a>
</li>
<li class="nav-item mx-4">
  <a class="nav-link link display-4 custom" href="#">REEL</a>
</li>
<li class="nav-item mx-4">
  <a class="nav-link link display-4 custom" href="#">Nuestros Clientes</a>
</li>
<li class="nav-item mx-4">
  <a class="nav-link link display-4 custom" href="#">Contacto</a>
</li>

在CSS中添加默认文字颜色和hover样式：

nav a {
  text-decoration: none;
}

.logo {
  height: 3rem;
}

/* 设置默认文字颜色 */
.navbar-nav .nav-item .nav-link.custom {
  color: #ffffff;
}

/* 设置hover状态颜色 */
.navbar-nav .nav-item .nav-link.custom:hover {
  color: #ffc107;
}