Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/36.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何更改悬停时字体图标的颜色_Html_Css_Font Awesome - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 如何更改悬停时字体图标的颜色

Html 如何更改悬停时字体图标的颜色

html css

Html 如何更改悬停时字体图标的颜色,html,css,font-awesome,Html,Css,Font Awesome,我使用了两个很棒的字体图标： fa圆薄 fa用户plus 它们堆叠在一起，形成圆形图标外观 <span class="fa-stack fa-sm"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-user-plus fa-stack-1x "></i> </span> 当我将鼠标悬停在上方时，我希望圆圈用黑色填充，fa user p

我使用了两个很棒的字体图标：

  • fa圆薄
  • fa用户plus
它们堆叠在一起，形成圆形图标外观

<span class="fa-stack fa-sm">
 <i class="fa fa-circle-thin fa-stack-2x"></i>
 <i class="fa fa-user-plus fa-stack-1x "></i>
</span>
当我将鼠标悬停在上方时，我希望圆圈用黑色填充，
fa user plus
变为白色。我怎样才能做到这一点

请参见jsiddle:

要达到所需效果，请在堆栈中添加一个
圆形图标，该图标在显示时是透明的（
不透明度：0.0
），在
上是实心的（
不透明度：1.0
）：悬停

例如（也在JSFIDLE:上）：

HTML


<span class="fa-stack fa-sm">
  <i class="fa fa-circle fa-stack-2x "></i>
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-user-plus fa-stack-1x "></i>
</span>



.fa-stack        .fa { color: black; }
.fa-stack        .fa.fa-circle-thin { color: black; }
.fa-stack        .fa.fa-circle { opacity:0.0; color:black; }

.fa-stack:hover  .fa.fa-user-plus { color: white; }
.fa-stack:hover  .fa.fa-circle-thin { color: black; }
.fa-stack:hover  .fa.fa-circle { opacity:1.0 }