我一直在尝试使用 Bootstrap 更改将鼠标悬停在导航链接上时弹出的灰色。可悲的是,我似乎无法让它工作。 (我只包含这个 HTML,因为没有它,stackoverflow 不允许我发布我的 jsfiddle 链接。)
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav nav-links">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><img id="logo-navbar-middle" src="images/logo.png" width="200" alt="Logo Thing main logo"></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
Jsfiddle 拥有所有的 html/css:https://jsfiddle.net/fzektrm3/2/
当鼠标悬停在链接上时,我似乎无法摆脱那种丑陋的灰色。任何帮助将不胜感激!
最佳答案
试试这个 https://jsfiddle.net/fzektrm3/3/
将此添加到您的css,您的css 必须包含在boostrap
css 之后
.nav > li > a:hover, .nav > li > a:focus {
background-color: #EF92A5;
text-decoration: none;
}
关于html - 在导航链接上更改 Bootstrap 的悬停颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33526601/