Question

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

这是我的HTML：

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

这是我的风格：

fa-stack-1x

悬停正在工作，直到我将鼠标悬停在内部图标（fa-stack-1x）上。只要我悬停fa-stack-2x，fa-stack-2x就会丢失悬停样式。

如何阻止{{1}}仅使用CSS丢失其悬停样式？

Answer 1

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

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

字体真棒悬停的堆叠图标不能正常工作

3 个答案: