Html ：悬停在堆叠字体图标上不工作

我正在尝试做一些非常简单的事情，让字体中的堆叠图标在悬停时改变颜色。我看到里面的图标（问号）像我想要的那样高亮显示，但是外面的圆圈没有改变颜色。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:
.更多信息切换：悬停{
颜色：#53AB46；
}

---

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

确保针对正确的元素。试着这样做： 如果您使用id=“more info share toggle”，那么您将不得不在样式表中使用“#”。如果使用class=“更多信息共享切换”，则应使用“”

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

---

有一个打字错误。应该是：

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

id不匹配，应该匹配