更改懸停上的鏈接顏色

Question

對於導航欄中的鏈接在懸停我需要給藍色但它不工作。 相反，它顯示白色。

如何解決這個問題？

在下方提供我的代碼。

http://jsfiddle.net/7HzPd/

http://jsfiddle.net/7HzPd/embedded/result/

<div class="container"> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </a> 
    <a class="brand" href="#"> 
     <img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png"> 
    </a> 
    <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li class="active"> 
       <a href="/docs/examples/product.html">Product</a> 
      </li> 
      <li> 
       <a href="/docs/examples/solution.html">Solutions</a> 
      </li> 
      <li> 
       <a href="/docs/examples/service.html">Services</a> 
      </li> 
      <li class="iphonePartnerLink"> 
       <a href="/docs/examples/partner.html">Partners</a> 
      </li> 
      <li class="iphoneContactLink"> 
       <a href="/docs/examples/contact.html">Contact</a> 
      </li> 
     </ul> 
     <ul class="nav" id="navSecond"> 
      <li class=""> 
       <a href="/docs/examples/partners.html">Partners</a> 
      </li> 
      <li> 
       <a href="/docs/examples/contact.html">Contact</a> 
      </li> 
     </ul> 
     <form class="navbar-form pull-right"> 
      <input class="span2" type="text" placeholder="Email"> 
      <input class="span2" type="password" placeholder="Password"> 
      <button type="submit" class="btn">Sign in</button> 
     </form> 
    </div> 
    <!--/.nav-collapse --> 
</div> 

Answer 1

我看到有懸停唯一的代碼是在這裏：

.navbar-inverse .nav .active > a:hover{ 
     background-color: transparent; 
} 
.navbar-inverse .nav .active > a:hover{ 
     color: #14486b; 
} 

首先，你應該結合這些元素，通過你的CSS和清理有些人沒有理由讓他們分開。

對於你的問題，我唯一看到的是懸停元素，在這種情況下，你的目標是懸停狀態的任何錨點，該狀態也包含.nav類中的.active類.navbar-inverse類。 ..您的目標是：不正確地懸停，活動類一次只適用於一個鏈接。

你應該有更多的東西一樣：

.nav li a:hover {} 

編輯：

找到罪魁禍首進一步下跌。

Theres在bootstrap.css 4714行的懸停狀態覆蓋了您的樣式。嘗試將!important放置在您放置的懸停上，並確保您的樣式表包含在bootstrap.css下。你也可以直接編輯bootstrap css。

Answer 2

這不工作？

a:hover 
{ 
background-color:blue; 
} 

而只是將a更改爲更具體的，如果你想。