Ändern Sie die Farbe, wenn Sie eine Schriftart mit einem tollen Symbol schweben lassen?

Question

Basis im Font Super documentation Ich erstelle dieses Symbol:

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i> 
</span> 

Dieser Code erstellen Sie diesen HTML:

<span class="fa-stack fa-5x"> 
    <i class="fa fa-circle fa-stack-2x">::before</i> 
    <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i> 
</span> 

Es ist ein gestapeltes Flag-Symbol. Ich möchte die Symbolfarbe auf Hover-Ereignis ändern, habe ich mit all diesen versucht:

.fa-stack:hover{ 
color: red 
} 
.fa-stack i:hover{ 
color: red 
} 
.fa-stack i before:hover{ 
color: red 
} 

aber nicht funktioniert.

Answer 1

, wenn Sie wollen, dass diese auf hover Verwendung nur die Farbe der Flagge ändern:

http://jsfiddle.net/uvamhedx/

.fa-flag:hover { 
 
    color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<i class="fa fa-flag fa-3x"></i>