当我在导航栏中的链接上时，会出现这种丑陋的灰色背景。 如何删除此灰色背景。链接应该保持红色，当盘旋时，它应该在整个黑色背景上呈黄色，但该链接上有灰色背景。也在丸。我认为只要与“导航”相关联的内容出现背景，就会出现背景信息。单词导致其他链接看起来很好。只有导航栏和药丸显然导致其css是导航丸。附上我悬停在它上面时发生的事情的图像。 p.s - 添加点而不是网站因为我的声誉不到10而且不能发布超过2个链接。
http://i.imgur.com/rw8qvXP.jpg
http://i.imgur.com/56KoD1z.jpg
#mainNav .container{
padding:0
}
#mainNav .container .navbar-brand{
color:#fed136;font-family:"Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive
}
#mainNav .container .navbar-brand.active,#mainNav .container .navbar-brand:active,#mainNav .container .navbar-brand:focus,#mainNav .container .navbar-brand:hover{
color:#fec503
}
#mainNav .container .btn-toggle{
padding:.75em;font-size:80%
}
#mainNav .container .navbar-nav .nav-item .nav-link{
font-size:90%;padding:.75em 0;font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:400;letter-spacing:1px;color:red
}
#mainNav .container .navbar-nav .nav-item .nav-link.active,#mainNav .container .navbar-nav .nav-item .nav-link:hover{
color:#fed136
}
@media (min-width:768px){
#mainNav{
background-color:transparent;padding:25px 0;-webkit-transition:padding .3s;-moz-transition:padding .3s;transition:padding .3s;border:none
}
#mainNav .navbar-brand{
font-size:1.75em;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s
}
#mainNav .navbar-nav .nav-item .nav-link{
padding:1.2em .4em!important
}
#mainNav.navbar-shrink{
background-color:#222;padding:5px 0
}
#mainNav.navbar-shrink .navbar-brand{
padding:.65em 0;font-size:1.25em
}
}<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-brand page-scroll" href="#page-top">Demo</a>
<button class="btn btn-primary btn-toggle hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fa fa-bars"></i></button>
<!-- Navigation Bar List Contents -->
<div class="clearfix hidden-md-up"></div>
<div class="collapse navbar-toggleable-sm" id="navbarResponsive">
<ul class="nav navbar-nav float-md-right">
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#sample">Sample Article</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#topics">Topics</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#whyus">Why Choose Us</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a>
</li>
<li>
<a href="form.php" class="btn btn-md btn-info btn-block" role="button">Order now</a>
</li>
</ul>
</div>
</div>
</nav>
答案 0 :(得分：0)
这是因为Bootstrap CSS代码。 hover上有此代码：
.nav > li > a:focus, .nav > li > a:hover {
text-decoration: none;
background-color: #eee;
}
删除背景颜色，应该可以解决问题。
在下一个工作代码段中，我通过加强选择器将其设置为transparent：
.container .nav > li > a:focus,
.container .nav > li > a:hover {
text-decoration: none;
background-color: transparent;
}
#mainNav .container {
padding: 0
}
#mainNav .container .navbar-brand {
color: #fed136;
font-family: "Kaushan Script", "Helvetica Neue", Helvetica, Arial, cursive
}
#mainNav .container .navbar-brand.active,
#mainNav .container .navbar-brand:active,
#mainNav .container .navbar-brand:focus,
#mainNav .container .navbar-brand:hover {
color: #fec503
}
#mainNav .container .btn-toggle {
padding: .75em;
font-size: 80%
}
#mainNav .container .navbar-nav .nav-item .nav-link {
font-size: 90%;
padding: .75em 0;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1px;
color: red
}
#mainNav .container .navbar-nav .nav-item .nav-link.active,
#mainNav .container .navbar-nav .nav-item .nav-link:hover {
color: #fed136
}
@media (min-width: 768px) {
#mainNav {
background-color: transparent;
padding: 25px 0;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
border: none
}
#mainNav .navbar-brand {
font-size: 1.75em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s
}
#mainNav .navbar-nav .nav-item .nav-link {
padding: 1.2em .4em!important
}
#mainNav.navbar-shrink {
background-color: #f00;
padding: 5px 0
}
#mainNav.navbar-shrink .navbar-brand {
padding: .65em 0;
font-size: 1.25em
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-brand page-scroll" href="#page-top">Demo</a>
<button class="btn btn-primary btn-toggle hidden-md-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu <i class="fa fa-bars"></i>
</button>
<!-- Navigation Bar List Contents -->
<div class="clearfix hidden-md-up"></div>
<div class="collapse navbar-toggleable-sm" id="navbarResponsive">
<ul class="nav navbar-nav float-md-right">
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#sample">Sample Article</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#topics">Topics</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#whyus">Why Choose Us</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a>
</li>
<li>
<a href="form.php" class="btn btn-md btn-info btn-block" role="button">Order now</a>
</li>
</ul>
</div>
</div>
</nav>
答案 1 :(得分：0)
你能做到的简单方法是用firefox或chrome浏览器打开页面，然后右键单击你想要弹出窗口的部分选择Inspect Element，那里会出现一堆代码。
在左侧显示HTML，右侧部分显示您可以更改的CSS，并将其视为实时区别。
重要的事情是将代码更改为您更改的部分并将其粘贴到您的代码中，然后才能生效。