我已尽全力解决这个简单的问题,但我无法弄清楚为什么它不起作用。 为报头的代码是更改引导程序标题链接颜色上悬停
/*-- header --*/
.header{
padding: 1em 0;
background: url(../images/header-bg.png) no-repeat 0px 0px;
background-size: 27% 100%;
margin-top:0px;
}
.logo{
float:left;
margin-top:0.5em;
}
span.menu{
display:none;
}
.top-nav{
float:right;
}
.top-nav ul{
margin:0;
padding:0;
}
.top-nav ul li{
display:inline-block;
}
.top-nav ul li a{
text-transform:uppercase;
font-weight:700;
color:#2C3E50;
margin:1em 1.3em;
display:inline-block;
text-decoration:none;
}
.top-nav ul li a:hover,.top-nav ul li.active a{
color:#f22b2b;
}
<style>
#navtopbar {
background-color: #ffffff;
}
}
</style>
<div class="nav navbar-fixed-top" id="navtopbar">
<div class="container-fluid">
<div class="top-nav">
<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="menu"> </span>
<div class="navbar-collapse collapse">
<ul>
<li id="linkcolor" class="active"><a href="~/index/index">Home</a></li>
<li id="linkcolor"><a href="~/Index/AboutUs">About</a></li>
<li><a href="~/Doctor/Index">Doctors</a></li>
<li><a href="~/Hospitals/Index">Hospitals</a></li>
<li><a href="~/Clinics/Index">Clinics</a></li>
<li><a href="~/Home/Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
它显示上活性的颜色和悬停是默认蓝色。我想把它改成红色。在CSS是
.top-nav ul li a:hover,.top-nav ul li.active a{
color:#f22b2b;
但它仍然显示蓝色。所以我尝试通过内联样式来覆盖css。
我都试过.nav > li > a {color: red}
或.navbar-collapse > ul > li > a {color: red}
或.nav > li {color:red}
或.nav > li > a:hover{color:red;}
或ul.nav a:hover, ul.nav a:focus, ul.nav a:active { color:red; }
没有人会为我工作。请建议我在哪里做错了?
这种蓝色和你的截图是不是标准的引导。 – makshh
@makshh好吧我的错误,我想要的,把这个蓝色变成红色。 –
你能提供一个JSFiddle吗? –