0
所以正如标题所说,我试图让我的Navbar使用Twitter Bootstrap在鼠标悬停在特定按钮上时具有不同的颜色。这里是我的index.html的代码片段:悬停在Bootstrap导航栏按钮上的不同颜色
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Frank does...</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
的目标是对导航栏的不同按钮(第1,第2页等)是不同的颜色。但是,我不知道该怎么做。我试图在li
元素放置<Div>
如:
<div class="home"><li><a href="#">Home</a></li></div>
,但不知何故弄乱了导航栏的结构,搞乱了导航栏,使home键进入导航栏上方。
我怎样才能让每个li
元素都有自己的hover
颜色?
此外,这是我的CSS代码,将悬停颜色更改为红色,但只有红色。
.navbar-inverse .navbar-collapse li a:hover,
.navbar-inverse .navbar-collapse li a:focus{
background-color:red;
}
谢谢,伙计。这很好用! –
很高兴我能帮到你,欢迎你! – vanburen