Html 字体图标悬停问题

我用

Bootstrap

和

FontAwesome

制作了一个菜单。我想将所有社交媒体图标的颜色更改为其原始颜色。以下是片段：

HTML

<nav class="navbar navbar-fixed-top" style="border-top:2px solid #CC0033;border-bottom:2px solid #CC0033;">
  <div class="container">
    <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
        <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="navbar-collapse collapse" id="navbar">-->
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav navbar-left">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a aria-expanded="true" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider" role="separator"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
         </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><i class="fa fa-facebook-square social-icon"></i></a></li>
          <li><a href="#" class="twitter"><i class="fa fa-twitter-square social-icon"></i></a></li>
          <li><a href="#"><i class="fa fa-instagram social-icon"></i></a></li>
          <li><a href="#"><i class="fa fa-pinterest-square social-icon"></i></a></li>
          <li><a href="#"><i class="fa fa-youtube-square social-icon"></i></a></li>
          <li><a href="#"><i class="fa fa-google-plus-square social-icon"></i></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

这是一个非工作状态

悬停时，图标应显示如下：

对于悬停，我放置了以下CSS：

.navbar .navbar-nav > li > a.twitter:hover
{
    color: #00ACED !important;
}

---

我怎样才能达到同样的效果？任何帮助都将不胜感激。

只需删除以下代码：

.navbar .navbar-nav > li > a:hover {
    /* background-color: #CC0033 !important; */
}

.navbar .navbar-nav > li > a:hover > i {
    color: #00abf1 !important;
}

nav > li > a:hover {
    /* background-color: #eee; */
}

背景色

覆盖了字体图标的颜色，因此它们在悬停时不可见

如果要更改悬停时字体图标的颜色，请使用以下代码：

.navbar .navbar-nav > li > a:hover {
    /* background-color: #CC0033 !important; */
}

.navbar .navbar-nav > li > a:hover > i {
    color: #00abf1 !important;
}

nav > li > a:hover {
    /* background-color: #eee; */
}

编辑

要将

li

的

背景色更改为白色，只需删除以下代码：

.navbar .navbar-nav > li > a:hover {
    /* background-color: #CC0033 !important; */
}

.navbar .navbar-nav > li > a:hover > i {
    color: #00abf1 !important;
}

nav > li > a:hover {
    /* background-color: #eee; */
}

如果替换此代码：

.navbar .navbar-nav > li > a.twitter:hover
{
    color: #00ACED !important;
}

为此：

.navbar .navbar-nav li a:hover > .fa-twitter-square { color: #00ACED !important; }

比它应该工作，祝你好运
 简单地替换这个

.navbar .navbar-nav > li > a:hover
{
    color: #FFFFFF !important;    
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    background-color: #CC0033 !important;
    color: #00aced
}

由此

.navbar .navbar-nav > li > a:hover
{
    color: #FFFFFF !important;    
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
    background-color: #CC0033;
    color: #00aced
}

再加上这个

.navbar .navbar-right > li > a:hover{
    background-color: #fff 
 }
.navbar .navbar-right > li > a.twitter:hover i{
    color: #00aced !important;
}

最好的：）
您可以通过更改这两行来达到所需的效果--

通过这种方式，您可以将li的背景色更改为白色


.navbar.navbar nav>li
{
边界：0px；
}
.navbar.navbar nav>li>a
{
颜色：#CC0033；
字体系列：“开放式Sans”，无衬线；
字体大小：粗体；
字体大小：16px；
}
.navbar.navbar nav>li>a:悬停
{
颜色：#FFFFFF；
字体系列：“开放式Sans”，无衬线；
字体大小：粗体；
字体大小：16px；
背景色：#CC0033！重要；
}
.fa{font系列：'FontAwesome'！重要；}
.社会偶像
{
颜色：#CC0033；
字体大小：25px；
}
.navbar.navbar nav>li>a:hover>i{
颜色：#00abf1！重要；
}
.navbar.navbar nav>li>a:悬停{
背景色：白色！重要；
}

切换导航










导航标题













也可以试试这个

    .navbar .navbar-right > li > a:hover{
       color: #fff !important;
     }
    .navbar .navbar-right > li > a:hover .fa{
        color: #fff !important;
    }

将此添加到css代码中：

.social-icon:hover {
    color: white!important;
}

你的演示对我有用（除了你的图标与悬停时的背景颜色相同，所以你看不到）你可以试试这个：
.navbar.navbar nav li a:hover>.fa{color:#00ACED！important；}
？你不需要使用
！重要提示：）@C0dekid:这很有效。您可以将此添加为答案。：）@SenjutiMahapatra补充了我的答案：-）使用鼠标悬停，我可以将
li
的
背景色更改为白色吗？
.fa
可以替换为
.fa twitter square
为每个社交媒体图标提供不同的风格：）使用鼠标悬停，我可以将
li
的
背景色更改为白色吗？@SenjutiMahapatra如果您尝试以下操作：
.navbar.navbar-nav.navbar-right li:hover a{background:#FFF！important；}
如果悬停，背景将为白色，图标将获得蓝色：）这不会使整个li的背景颜色为白色，但是对于
a
@SenjutiMahapatra，锚定标记正在填充
li
，因此从技术上讲，如果您想更改悬停时
li
的背景色，它将不起任何作用。所以你必须设计锚定标签的样式。完美。谢谢：）