Как изменить цвет значка «fa», когда мышь над ним?

Question

Я хочу изменить цвет двух значков fa, которые помещаются в стек. Но цвет не изменяется для внешнего значка.

HTML:

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

CSS:

.fa-home:hover{ 
    color: yellow; 
    } 

    .fa-circle:hover{ 
    color: white; 
    } 

JSFiddle: http://jsfiddle.net/rajagopalx/k3c1c0bf/

Answer 1

Установите парить на окружающий элемент:

.fa-stack:hover .fa-home { 
    color: yellow; 
} 
.fa-stack:hover .fa-circle { 
    color: white; 
} 

http://jsfiddle.net/bnh84trn/

Answer 2

Вы можете использовать зависание на оберточном элементе. Круг .fa не является технически зависающим, потому что он скрыт от дома.

Это будет работать с любым общим значком, а не только дома:

.fa-stack:hover .fa { 
    color: yellow; 
} 
.fa-stack:hover .fa-circle{ 
    color: white; 
} 

Answer 3

Если изменить путь ваш CSS записывается и целевой fa-stack по наведению он прекрасно работает.

CSS:

.fa-stack:hover .fa-home { 
    color: yellow; 
} 
.fa-stack:hover .fa-circle 
{ 
    color: white; 
} 

Рабочий пример: http://jsfiddle.net/p2yLcsw0/2/