悬停链接时更改单数图标颜色

Question

StackOverflow 上的第一个问题。

我一直在努力解决这个问题。 我的主菜单选项 (@gabrielpinto.pt) 由文本和图标 (FontAwesome) 组成。

当我悬停书面链接时，我想更改图标的悬停颜色。

这是菜单选项的标记之一：

<nav id="site-navigation" class="main-navigation col-md-8" role="navigation">
  <div class="menu-menu-principal-container">
    <ul id="menu-menu-principal" class="menu nav-menu">
      <li id="menu-item-24" class="fa-street-view menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-24">
        <a href="http://gabrielpinto.pt/">Gabriel Pinto</a>
      </li>
    </ul>
  </div>
</nav>

我只是 HTML 和 CSS 的初学者，我尝试了很多不同的规则，但没有任何积极的结果。

例子：

a.fa-street-view:hover li::before {
color: #bc4676; }

什么 CSS 规则可以使它起作用？

Answer 1

这可行：

.fa-street-view:hover {
    color: #bc4676;
}

这是一个例子：

http://jsfiddle.net/gtr45hk7/

编辑

我在您的 html 中将 .fa 类添加到 .fa-street-view 以使示例正常工作。

编辑 2

我刚刚查看了您的网站。试试这个：

.main-navigation li:hover::before {
  color: #bc4676;
}

如果您想匹配链接转换，这可能会成功：

.main-navigation li::before {
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}