我正在使用两个Font Awesome图标：
fa-circle-thinfa-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 }
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句