Question

我正在尝试做一些非常简单的事情，当它们悬停在上面时，堆叠的图标来自字体 - 真棒变色。我看到内部图标（问号）突出显示我想要，但外圈不改变颜色。下面的HTML和CSS：

//HTML:
<span class="more-info-toggle fa-stack">
<a href="#" id="more-info-share-toggle" data-toggle="tooltip" title="Why share?">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-question fa-stack-1x"></i>
</a>
</span>

//CSS:
.more-info-toggle:hover {
    color:#53AB46;
}

知道为什么外圈不会改变颜色？谢谢。

Answer 1

确保定位正确的元素。尝试这样的事情：如果您使用id =“more-info-share-toggle”，则必须在样式表中使用“＃”符号。如果你使用class =“more-info-share-toggle”，你应该使用'。'

#more-info-share-toggle:hover i {
   color:#53AB46;
}

Answer 2

有一个错字。它应该是：

#more-info-share-toggle:hover {
color:#53AB46;
}

id不匹配，应该是＃。

：悬停不工作堆叠的字体 - 真棒图标

2 个答案: