改变Bootstrap中glyphicon的backgound颜色 [英] Changing backgound color of glyphicon in Bootstrap
本文介绍了改变Bootstrap中glyphicon的backgound颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在悬停/焦点上更改glyphicon的背景颜色,但在我的横幅上没有成功。下面是2个glyphicons的代码片段,即 glyphicon-user 和 glyphicon -login 。即使我在css中设置了另一种颜色,背景也会变为白色。
I'm trying to change the background color of a glyphicon upon hover/focus without success in my banner.Below is a code snippet for the 2 glyphicons i.e. glyphicon-user and glyphicon-login. The background changes to white even though I've set another color in the css.
1.html
<div class="row">
<div class="col-sm-6 col-md-offset-4 col-md-4">
<a id="logo" href="#"> <img src="../static/images/logo_small.png" data-medium="../static/images/logo_medium.png" data-large="../static/images/logo_large.png"></a>
</div>
<div class="col-sm-6 col-md-4">
<ul class="nav navbar-nav pull-right">
<li><a class="custom-white" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a class="custom-white" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
2.css
.custom-white { color:#fff;}
.custom-white:hover,
.custom-white:active,
.custom-white:focus {background-color: yellow;}
推荐答案
尝试将CSS更改为:
Try changing your CSS to this:
.nav>li>a.custom-white:hover,
.nav>li>a.custom-white:active,
.nav>li>a.custom-white:focus {background-color: yellow;}
请参阅此演示
HTH,
-Ted
HTH, -Ted
这篇关于改变Bootstrap中glyphicon的backgound颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文