层叠的图标字体真棒悬停无法正常工作(Font Awesome hover of stacked ic

我面临着关于我的图标悬停效果的问题。

这是我的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失去悬停风格。

我怎样才能防止fa-stack-2x失去其hover样式仅适用于CSS？

Answer 1:

您需要捕获容器跨度“.fa栈”这样的悬停事件：

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

这里是工作提琴： https://jsfiddle.net/fou3om77/

Answer 2:

您将需要为目标的父元素:hover选择，因为没有针对先前元素的方法：

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

Answer 3:

这是因为你的悬停只在上定义.fa-circle元素，而不是任.fa-stack-1x元素。 如果你想针对所有的图标，你需要放置在悬停效果fa-stack父：

.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. */
}

文章来源: Font Awesome hover of stacked icons not working properly