引導改變導航欄上的活動按鈕，CSS，HTML

你好，我是新來的HTML和CSS，我使用bootstrap來創建一個網站。我正在尋找更改右側導航欄上的活動按鈕的顏色。也想改變文字顏色時，我已經看到了一些例子，但我無法將其應用於此示例。提前致謝。引導改變導航欄上的活動按鈕，CSS，HTML

HTML：

<div class="Menu"> 
    <nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-left" href="http://www.website.com"> <img src="Logo.png" alt="LOGO"> 
     </a> 
     </div> 
     <div id="navbar3" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    <!--/.container-fluid --> 
    </nav> 
</div>

CSS：

navbar-right{ 
    padding-top: 35px; 
} 

img { 
    padding-top: 17px; 
    padding-left: 17px; 
} 

.jumbotron { 
    padding-top: 10px; 
    padding-bottom: 48px; 
    border: 2px solid black; 
} 

.navbar-inverse .navbar-nav > li > a { 
    color: green; 
} 

.navbar3 > .navbar-nav .navbar-right>.active { 
    color:red; 
    background-color:yellow; 

} 
.navbar3 > .navbar-nav .navbar-right>.active > a, 
.navbar3 > .navbar-nav .navbar-right>.active > a:hover, 
.navbar3 > .navbar-nav .navbar-right>.active > a:focus{ 
    color:red; 
    background:blue; 
}

來源

2016-08-15 txm101

你會大概找到你在這裏尋找什麼：http://stackoverflow.com/questions/28712267/how-to-change-the-button-color-when-it-is-active-using-bootstrap – Majd

總是使用代碼片段或JSfiddle顯示你的工作代碼。 –

將在未來這樣做謝謝 – txm101

在正確引導的CSS規則試試這個CSS來：

.navbar-inverse .navbar-nav>.active>a{ 
    background-color:red 
} 

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover{ 
    color:red 
} 

#navbar3 .navbar-nav>.open>a, #navbar3 .navbar-nav>.open>a:focus, #navbar3 .navbar-nav>.open>a:hover{ 
    background-color:red 
}

這裏正在演示：https://jsfiddle.net/8ryewrn3/2/

來源

2016-08-15 09:28:30

感謝解決懸停問題，我添加了屏幕截圖，問題是活動按鈕上的黑色。 – txm101

你必須在你的CSS一些過錯時固定它會很好地工作：

您正在使用.navbar3，這是不是一個class是id所以你應該使用#navbar3
還有.navbar-nav和.navbar-right之間的空間，但它不應該是一個空間.navbar-nav.navbar-right不.navbar-nav .navbar-right

所以你的CSS必須是這樣的：

#navbar3 > .navbar-nav.navbar-right>.active > a, 
#navbar3 > .navbar-nav.navbar-right>.active > a:hover, 
#navbar3 > .navbar-nav.navbar-right>.active > a:focus{ 
    color:red; 
    background:blue; 
}

這將改變激活鍵，改變懸停，你應該做這樣的：

#navbar3 > .navbar-nav.navbar-right>li>a:hover{ 
    color:yellow; 
}

這裏正在演示：https://jsfiddle.net/o2dr4w8e/

來源

2016-08-15 09:39:08

引導改變導航欄上的活動按鈕，CSS，HTML

回答

相關問題