在 Bootstrap 中更改字形的背景颜色 [英] Changing background color of glyphicon in Bootstrap

问题描述

我试图在我的横幅中悬停/聚焦时更改字形的背景颜色，但没有成功.下面是 2 个字形的代码片段，即 glyphicon-user 和 glyphicon- 登录.即使我在 css 中设置了另一种颜色，背景也会变为白色.

1.html

<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 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>注册</a></li><li><a class="custom-white" href="#"><span class="glyphicon glyphicon-log-in"></span>登录

2.css

.custom-white { color:#fff;}.custom-white:悬停，.custom-white:active,.custom-white:focus {背景颜色:黄色；}

解决方案

尝试将 CSS 更改为:

.nav>li>a.custom-white:hover,.nav>li>a.custom-white:active,.nav>li>a.custom-white:focus {background-color: yellow;}

参见这个演示

HTH，-泰德

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;}

解决方案

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;}

See this demo

HTH, -Ted

这篇关于在 Bootstrap 中更改字形的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！