如何实现Bootstrap中nav navbar-nav下li元素的鼠标悬停变色效果

问题根源 #

你写的CSS选择器active :hover{color:green}有两个核心问题：

1. 目标元素与语法错误：active :hover的写法逻辑不对，而且你没定位到正确的交互元素——Bootstrap导航栏里的可点击文字是放在<a>标签里的（通常带.nav-link类），hover样式应该作用在链接上，而非<li>本身。
2. 样式优先级不足：Bootstrap自带的导航链接样式权重比你这个简单选择器高，导致你的自定义样式被默认样式覆盖了。

解决方案 #

要搞定这个hover变色效果，你需要：

• 精准定位到导航栏的<a>标签
• 确保自定义样式的权重足够覆盖Bootstrap默认样式
• 把自定义样式写在Bootstrap CSS之后（保证加载顺序正确）

分版本适配写法 #

Bootstrap 5.x（当前主流版本）

Bootstrap 5的导航链接统一用.nav-link类，直接针对这个类写hover样式：

.navbar-nav .nav-link:hover {
  color: green;
  /* 如果还是不生效，可临时加!important（优先用高权重选择器替代，尽量少用!important） */
  /* color: green !important; */
}

Bootstrap 3.x（旧版本）

如果是Bootstrap 3，导航链接的结构是.navbar-nav > li > a，选择器要对应调整：

.navbar-nav > li > a:hover {
  color: green;
}

不用!important的权重提升技巧 #

不想用!important的话，可以给选择器增加权重，比如加上父元素或body前缀：

body .navbar-nav .nav-link:hover {
  color: green;
}

完整可运行代码示例 #

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 先引入Bootstrap CSS，保证加载顺序 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <!-- 自定义样式放在Bootstrap之后 -->
  <style>
    .navbar-nav .nav-link:hover {
      color: green;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">product</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">market</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

额外注意事项 #

• 检查HTML结构：Bootstrap 5要求<li>里的<a>必须带.nav-link类，Bootstrap 3则是li > a的基础结构。
• 绝对不要把自定义样式写在Bootstrap CSS之前，否则默认样式会直接覆盖你的修改。

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