html - How to change color of "fa icon" when mouse over on it? -

i want change color of 2 fa icons placed in stack. color not changed outer icon.

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/

set hover on surrounding element:

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

http://jsfiddle.net/bnh84trn/