Question

StackOverflow的第一个问题。

我一直在竭尽全力解决这个问题。我的主菜单选项（@ gabrielpinto.pt）由文本和图标（FontAwesome）组成。

我希望更改图标的悬停颜色，当我将鼠标悬停在书面链接上时。

这是菜单选项标记之一：

＆＃13;

<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>

＆＃13;

我只是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; }

悬停链接时更改奇异图标颜色

1 个答案: