无法将列表的文字颜色更改为白色

Question

我创建了一个列表，其中使用了字形图标，当我将鼠标悬停在上面时，字形图标会变成黑色，并且我希望图标显示为白色。我也在使用引导程序。

列表：

<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
    <li><a href="#"><i class="glyphicon glyphicon-user"></i></a></li>
    <li><a href="#"><i class="glyphicon glyphicon-bell"></i></a></li>
    <li><a href="#"><i class="glyphicon glyphicon-search"></i></a></li>
    <li><a href="#"><i class="glyphicon glyphicon-log-out"></i></a></li>
    <li><a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i></a></li>

Answer 1

a.glyIcon{
   color:gray !important;
 }

a.glyIcon:hover{
   color:orange !important;
 }

<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-user"></i>List 1</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-bell"></i>List 2</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-search"></i>List 3</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-log-out"></i>List 4</a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-menu-hamburger"></i>List 5</a></li>
</ul>

为您的<a>标签添加类名

html

<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-user"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-bell"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-search"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-log-out"></i></a></li>
<li><a class="glyIcon" href="#"><i class="glyphicon glyphicon-menu-hamburger"></i></a></li>
</ul>

CSS

a.glyIcon{
   color:black !important;
 }

a.glyIcon:hover{
   color:white !important;
 }

Answer 2

您会看到白色被覆盖，因为引导程序选择器比您的选择器更具体。

.navbar a:hover{ color:white;   }

此外，您的html不包含类navbar，因此该选择器不起作用，也许尝试将CS​​S中的类名称改为.navbar-nav。

Answer 3

您需要在该特定目标元素的悬停上添加样式。

.navbar-nav li a.glyphicon i {
  color: green;
}

.navbar-nav li:hover a.glyphicon {
  color: blue;
}

.navbar-nav li:hover a.glyphicon i {
  color: red;
}

<ul class="navbar-nav">
  <li>
    <a class="glyphicon">
      Anchor Tag
      <i class="glyphicons">sample</i>
    </a>
  </li>
</ul>

Answer 4

ul li {
  color: #000000;
  list-style: none;
  transition: all 0.5s linear;
}
ul li:hover {
  color: #ffffff;
}

<ul class="nav navbar-nav navbar-right" style="margin-top:5px;padding:10px;font-size:20px;;font-weight:bold;">
    <li><a href="#"><i class="glyphicon glyphicon-user"></i></a>text1</li>
    <li><a href="#"><i class="glyphicon glyphicon-bell"></i></a>text2</li>
    <li><a href="#"><i class="glyphicon glyphicon-search"></i></a>text3</li>
    <li><a href="#"><i class="glyphicon glyphicon-log-out"></i></a>text4</li>
    <li><a href="#"><i class="glyphicon glyphicon-menu-hamburger"></i></a>text5</li>
</ul>

选中这个。