Wie Farbe des Schrift Ehrfürchtig gestapelt Symbole auf schweben ändern

Question

ich zwei Font Super Symbole bin mit:

• fa-circle-thin
• fa-user-plus

Sie werden auf aufeinander gestapelt geben ein Kreissymbol-Look.

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

Wenn ich über mich schweben will, dass der Kreis in schwarz gefüllt werden und die fa-user-plus auf Weiß zu ändern. Wie kann ich das erreichen?

See JSFiddle: http://jsfiddle.net/ReturnOfTheMac/Lwdaen75/

Answer 1

den gewünschten Effekt zu erzielen, fügen Sie ein fa-circle Symbol auf den Stapel, der auf dem Display transparent sein (opacity:0.0) und Feststoff (opacity:1.0) auf :hover.

Zum Beispiel (auch auf 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 }