如何在悬停时更改Font Awesome堆叠图标的颜色

Question

我正在使用两个Font Awesome图标：

• fa-circle-thin
• fa-user-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更改为白色。 我怎样才能做到这一点？

见JSFiddle： http ： //jsfiddle.net/ReturnOfTheMac/Lwdaen75/

Answer 1

要获得所需效果，请在堆栈中添加一个fa-circle图标，该图标将在透明显示（ opacity:0.0 ）和实心（ opacity:1.0 ）上显示:hover 。

例如（也在JSFiddle： http ： //jsfiddle.net/2hxxuv52/5/ ）：

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>

CSS

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