：悬停在堆叠的字体真棒图标上不起作用答案

【问题标题】：:hover not working on stacked font-awesome icon：悬停在堆叠的字体真棒图标上不起作用
【发布时间】：2014-09-18 14:01:53
【问题描述】：

我正在尝试做一些非常简单的事情，当它们被悬停在上面时，它们会从 font-awesome 改变颜色的堆叠图标。我看到内部图标（问号）像我想要的那样突出显示，但外部圆圈没有改变颜色。下面是 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;
}

知道为什么外圈没有改变颜色吗？谢谢。

【问题讨论】：

标签： html css font-awesome

【解决方案1】：

有错别字。应该是：

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

id 不匹配，应该是#。

【讨论】：

【解决方案2】：

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

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

【讨论】：