在 Bootstrap 中更改字形图标的背景颜色

Question

我试图在悬停/聚焦时更改字形图标的背景颜色，但在我的横幅中没有成功。下面是 2 个字形图标的代码 sn-p，即 glyphicon-user 和 glyphicon-登录。即使我在 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;}

Answer 1

在属性值后添加!important

工作demo

.custom-white:hover, 
.custom-white:active,
.custom-white:focus {background-color: yellow !important;}

Answer 2

尝试将您的 CSS 更改为：

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

见this demo

HTH, -泰德

Answer 3

只需使用 "!important" css 功能来覆盖引导程序的 css。例如，

.custom-white:hover, .custom-white:active, .custome-white:focus {background-color: yellow !important;}

否则浏览器会先编译bootsrap的默认值。希望有效！

Answer 4

试试这个， 只需更新您的导航 css 行

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