堆叠图标的 Font Awesome 悬停无法正常工作

Question

我遇到了一个关于图标悬停效果的问题。

这是我的 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 在仅 CSS 时失去其悬停样式？

Answer 1

您需要为 :hover 选择器定位父元素，因为无法定位之前的元素：

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

Answer 2

那是因为您的悬停仅定义在 .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. */
}

Answer 3

您需要像这样捕获容器范围“.fa-stack”上的悬停事件：

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

这是一个有效的 fiddle ：https://jsfiddle.net/fou3om77/

堆叠图标的 Font Awesome 悬停无法正常工作

Font Awesome hover of stacked icons not working properly

css

css-selectors

font-awesome