堆叠图标的字体真棒悬停无法正常工作 [英] Font Awesome hover of stacked icons not working properly

问题描述

我正面临有关图标悬停效果的问题.

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

这是我的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>

这是我的风格:

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

悬停将一直工作，直到我将内部图标(fa-stack-1x)悬停为止.一旦我将fa-stack-1x悬停，fa-stack-2x就会失去悬停样式.

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.

如何仅使用CSS防止fa-stack-2x失去其悬停样式?

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

推荐答案

您需要像这样在容器范围".fa-stack"上捕获悬停事件:

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

这是一个有效的小提琴: https://jsfiddle.net/fou3om77/

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

这篇关于堆叠图标的字体真棒悬停无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！