悬停时更改单一图标颜色 link

Question

Whosebug 的第一个问题。

我一直在绞尽脑汁想弄清楚这个问题。我的主菜单选项 (@ gabrielpinto.pt) 由文本和图标 (FontAwesome) 组成。

我想在悬停书面 link 时更改图标的悬停颜色。

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

<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 class 添加到 .fa-street-view 以使示例有效。

编辑 2

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

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

如果你想匹配 link 转换，这可能会成功：

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

悬停时更改单一图标颜色 link

Changing singular icon color when hovering link

css

icons

hover

mousehover

font-awesome