将鼠标悬停在li上以改变twitter bootstrap中的颜色

I am trying to make the inner text turn green when I hover over. However it is not doing so and I am not sure why. I am using Twitter bootstrap

当我将鼠标悬停在上面时，我试图让内部文本变为绿色。然而，它没有这样做，我不知道为什么。我正在使用Twitter bootstrap

Here is my code:

这是我的代码：

CSS:

CSS：

#nav_pills li:hover {
    color: green;
}

HTML:

HTML：

  <nav class="navbar navbar-default">
    <ul id="nav_pills" class="nav nav-pills" role="tablist">
      <li role="presentation"><a href="#about">About</a></li>
      <li role="presentation"><a href="#services">Services</a></li>
      <li role="presentation"><a href="#portfolio">Portfolio</a></li>
      <li role="presentation"><a href="#contact">Contact</a></li>
    </ul>
  </nav>

3 个解决方案

#1

Add the aselector to your CSS

将aselector添加到CSS中

#nav_pills li:hover a{
   color: green;
}

#2

replace

更换

    #nav_pills li:hover a {
    color: green;
}

#3

Simply change it to

只需将其更改为

#nav_pills li:hover a{
   color: green;
}

Here's a little fiddle for you

这对你来说有点小提琴