在导航链接上更改Bootstrap的悬停颜色？

Question

我一直试图改变当你将鼠标悬停在导航链接上时弹出的灰色,使用Bootstrap.可悲的是,我似乎无法让它发挥作用.(我只包含这个HTML,因为stackoverflow不会让我发布我的jsfiddle链接,没有它.)

    <header role="banner">
    <nav id="navbar-primary" class="navbar" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="navbar-primary-collapse">
          <ul class="nav navbar-nav nav-links">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Menu</a></li>
            <li><img id="logo-navbar-middle" src="images/logo.png" width="200" alt="Logo Thing main logo"></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
</header><!-- header role="banner" -->

Jsfiddle有所有的html/css:https://jsfiddle.net/fzektrm3/2/

当我悬停在链接上时,我似乎无法摆脱那种丑陋的灰色.任何帮助将不胜感激!

Answer 1

试试这个https://jsfiddle.net/fzektrm3/3/

将此添加到您的CSS,您的CSS必须包含在boostrapCSS 之后

.nav > li > a:hover, .nav > li > a:focus {
  background-color: #EF92A5;
  text-decoration: none;
}