如何在导航栏链接上悬停时删除此背景？
问题描述：
当我通过导航栏中的链接时，会出现这种丑陋的灰色背景。 我怎样才能删除这个灰色的背景。链接应保持为红色，并且在悬停时，它应该在整个黑色背景上呈现黄色，但该链接上存在灰色背景。也在药片中。我认为背景随时会出现在与“导航”字相关的内容上，因为其他链接看起来不错。只有导航栏和药丸导致它的CSS显然是nav-pills。附上我悬停时发生的事情的图像。 p.s - 添加点而不是.com，因为我的声望低于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>
答
这是因为引导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>
答
最简单的方法，你可以做到这一点是与Firefox或Chrome浏览器打开网页并右键单击你想要的部分出现弹出窗口选择检查元素出现一堆代码。
在左侧显示的是HTML，右侧显示了CSS，您可以更改并将差异视为活动的一部分。
重要事情就是将代码形式复制到您更改的部分并粘贴到您的代码中，然后才能正常工作。
编辑您的问题，提供一个谜题 –
您的问题没有提供足够的代码来重现此问题。请更新您的问题，以便它以[最小，完整和可验证的示例]（http://stackoverflow.com/help/mcve）显示您的所有相关代码。 –
我编辑了您的图片链接和代码，但输出看起来与您的图片不匹配。你忘了提到一些CSS代码吗？ –