Kosta021 Kosta021 - 3 months ago 10
CSS Question

Font Awesome Hover Issue

This question is related to http://stackoverflow.com/questions/25770590/change-color-when-hover-a-font-awesome-icon#=

What I'm trying to achieve is the hover style on Circle behind icon.

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

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


http://jsfiddle.net/uvamhedx/802/

As you can see, when you go over the image, only one part of it will activate the hover effect. I guess this is because other image (flag) is on top if it.. Is there any way I could "avoid" flag icon and make it work?

Answer

.fa-circle is a child of .fa-stack, so check for the hover on the parent.

If you only want to target .fa-circle:

.fa-stack:hover .fa-circle{
    color: red;
}

If you want to target all .fa-stacks:

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

Or if you create your own class, it won't affect the normal behaviour:

<span class="fa-stack fa-5x hover-change">

CSS:

.hover-change:hover {
    color: red;
}