字体真棒图标悬停问题

我做了一个菜单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 
{ 
    border: 0px !important; 
} 
.navbar .navbar-nav > li > a 
{ 
    color: #CC0033 !important;  
    font-family: 'Open Sans', sans-serif; 
    font-weight: bold; 
    font-size: 16px; 
} 
.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; 
} 
.fa { font-family: 'FontAwesome' !important; } 
.social-icon 
{ 
    color: #CC0033 !important; 
    font-size:25px !important; 
} 
.navbar .navbar-nav > li > a.twitter:hover 
{ 
    color: #00ACED !important; 
}

这是一个非工作Demo

悬停在图标应该这样显示：

悬停我已经把下面的CSS：

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

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

来源

2017-03-01 Senjuti Mahapatra

你的演示为我工作（除非你的图标与悬停时的背景颜色相同，所以你不会看到它） – Shadowfox

你可以试试这个：'.navbar .navbar-nav li a：hover> .fa {color：＃00ACED！important; ''？ – Jer

你应该不需要在所有内容上使用'！important' :) http://www.bootply.com/1ywzSCHZ5Z –

你可以通过改变达到预期的效果这两条线 -

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

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

.navbar .navbar-nav > li 
 
{ 
 
    border: 0px; 
 
} 
 
.navbar .navbar-nav > li > a 
 
{ 
 
    color: #CC0033;  
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
} 
 
.navbar .navbar-nav > li > a:hover 
 
{ 
 
    color: #FFFFFF;  
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    background-color: #CC0033 !important; 
 
} 
 
.fa { font-family: 'FontAwesome' !important; } 
 
.social-icon 
 
{ 
 
    color: #CC0033; 
 
    font-size:25px; 
 
} 
 
.navbar .navbar-nav > li > a:hover > i { 
 
    color: #00abf1 !important; 
 
} 
 
.navbar .navbar-nav > li > a:hover { 
 
    background-color: white !important; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
     
 
     <style type="text/css"> 
 
     
 
     </style> 
 
     <script type="text/javascript"> 
 
     
 
     </script> 
 
     </head> 
 
     <body> 
 
     
 
     
 

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

 
</body> 
 
</html>

希望这有助于！

来源

2017-03-01 11:06:47 neophyte

完美。谢谢：） –

只是删除下面的代码：

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

的background-color是在阴影中的字体真棒图标的颜色，因此，他们不是在悬停可见。

相反，如果你想改变您的字体真棒图标的颜色上悬停使用下面的代码：

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

编辑

要更改li白色的background-color，只是删除以下代码：

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

来源

2017-03-01 10:25:22 nashcheez

随着悬停我可以改变''背景颜色'''白'？ –

查看编辑答案。 – nashcheez

如果您将此代码取代：

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

有了这个：

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

比它应该工作，祝你好运！

来源

2017-03-01 10:44:09 Jer

'.fa'可以替换成'.fa-twitter-square'来为每个社交媒体图标赋予不同的风格:) –

使用悬停可以将'li'的背景颜色更改为白色？ –

@SenjutiMahapatra如果你试试这个：'.navbar .navbar-nav.navbar-right li：悬停{background：#FFF！important; }'如果悬停，背景会变成白色，图标会变成蓝色:) – Jer

只需更换这

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

一切顺利:)

来源

2017-03-01 10:55:12 Mani100ni

也试试这个

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

来源

2017-03-01 11:08:13

添加到您的CSS代码：

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

工作对我来说这样...

来源

2017-03-01 11:09:41 FusionDesign

字体真棒图标悬停问题

回答

相关问题