在導航鏈接上更改Bootstrap的懸停顏色？

我一直在嘗試改變當您將鼠標懸停在導航鏈接上時彈出的灰色，並使用Bootstrap。可悲的是，我似乎無法得到它的工作。（我只包括這個HTML，因爲計算器不會讓我後我的jsfiddle鏈接，沒有它。）在導航鏈接上更改Bootstrap的懸停顏色？

<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/

我做不到在懸停在鏈接上時似乎擺脫了那種醜陋的灰色。任何幫助將不勝感激！

來源

2015-11-04 Dylan Bailey

我看到Nenad已經爲您解決了這個問題。我建議開始瞭解Google Chrome的__Developer Tools__或FireBug。他們非常適合檢查頁面上的元素，並在當時及時查看正在應用的CSS。本來對你解決這個問題有很大的用處。 – Jay

試試這個https://jsfiddle.net/fzektrm3/3/

添加到您的CSS，你的CSS必須包含後boostrap CSS

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

來源

2015-11-04 16:14:09

我非常愛你。 –

很高興我可以幫助:) –

這來自缺省引導CSS

將此代碼添加到您的CSS文件

#navbar-primary .navbar-nav > li a:hover{ 
    background:transparent !important; 
}

來源

2015-11-04 16:15:39

你們都非常幫助。謝謝！ –

歡迎您@DylanBailey –

Bootstrap 3

<style> 
    .navbar-default .navbar-brand:hover, 
    .navbar-default .navbar-brand:focus { 
     color: white; 
     text-decoration: none; 
    } 

    .navbar-default .navbar-nav > li > a:hover, 
    .navbar-default .navbar-nav > li > a:focus { 
     color: white; 
     text-decoration: none; 
    } 
</style>

來源

2017-01-25 23:08:49 Dazzle

在導航鏈接上更改Bootstrap的懸停顏色？

回答

相關問題