Font Awesome hover of stacked icons not working properly

问题

I am facing a Problem regarding the hover effect of my icons.

Here is my HTML:

<div class="container">
        <div class="row">
            <div class="col-md-6 text-center">
                <a href="#">
                    <span class="fa-stack fa-5x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-wrench fa-stack-1x fa-inverse"></i>
                    </span>
                </a>
            </div>
            <div class="col-md-6 text-center">
                <a href="#">
                    <span class="fa-stack fa-5x">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa-lightbulb-o fa-stack-1x fa-inverse"></i>
                    </span>
                </a>
            </div>
        </div>
    </div>

Here is my style:

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

The hover is working until I hover the inner icon (fa-stack-1x). As soon as I hover the fa-stack-1x the fa-stack-2x loses the hover style.

How can I prevent the fa-stack-2x to lose its hover style with only CSS?

回答1:

You need to capture the hover event on the container span ".fa-stack" like that:

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

here is a working fiddle : https://jsfiddle.net/fou3om77/

回答2:

You will need to target the parent element for the :hover selector, since there is no way of targeting previous elements:

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

回答3:

That's because your hover is only defined on the .fa-circle element and not either of the .fa-stack-1x elements. If you wish to target all the icons you'll need to place the hover effect on the fa-stack parent:

.fa-stack .fa {
    color: red; /* All icons within the fa-stack are red by default. */
}

.fa-stack:hover .fa {
    color: blue; /* All icons within the fa-stack are blue when hovered over. */
}

来源：https://stackoverflow.com/questions/31827121/font-awesome-hover-of-stacked-icons-not-working-properly

标签

css

css-selectors

font-awesome