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

Question

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

这是我的代码：

CSS：

#nav_pills li:hover {
    color: green;
}

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>

Answer 1

将a选择器添加到CSS

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

Answer 2

替换

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

Answer 3

只需将其更改为

即可

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

这里有一点fiddle给你