Font Awesome Hover Issue

Question

This question is related to https://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?

rybo111 · Accepted Answer · 2016-08-19T14:50:43.927

4

.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;
}

edited Aug 19 '16 at 14:50

answered Aug 19 '16 at 14:44

rybo111

12,240
4
61
70

Got the same result with just `.fa-stack:hover { .. }` – Wild Beard Aug 19 '16 at 14:45
1

@Press If that's the desired effect then that would also work. Updated answer. – rybo111 Aug 19 '16 at 14:52
Thanks, the first one did what I needed. – Kosta Aug 19 '16 at 14:54

score 0 · Answer 2 · answered Aug 19 '16 at 14:49

I use custom classes to avoid default behavior of original definitions:

HTML :

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

CSS :

.customClass:hover .customClassRed {
    color: red;
}

Font Awesome Hover Issue

2 Answers2