Search code examples
csshovericonsfont-awesomemousehover

Changing singular icon color when hovering link

First question at StackOverflow.

I've been busting my head to figure this one out. My main menu options (@ gabrielpinto.pt) are made of text and icon (FontAwesome).

I want to change the hover color of the icon WHEN I'm hovering the written link.

Here's one of the menu option's markup: 

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

I'm just a beginner in HTML and CSS, and I've tried a lot of different rules but without any positive result.

Example:

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

What CSS rule will make it work?

Solution

  • This would work:

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

    Here is an example:

    http://jsfiddle.net/gtr45hk7/

    Edit

    I added the .fa class to .fa-street-view in your html to make the example work.

    Edit 2

    I just looked at your site. Try this:

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

    If you want to match the link transitions, this might do the trick:

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