如何在悬停时更改 Font Awesome 堆叠图标的颜色
How to change color of Font Awesome stacked icons on hover
我正在使用两个 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/
为达到预期效果,向堆栈添加一个 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 }
我正在使用两个 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/
为达到预期效果,向堆栈添加一个 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 }