Changing singular icon color when hovering link

  • Resolved GSPinto

    (@gspinto)


    11 years, 4 months ago

    Hello!

    I’ve been trying to make the main menu FontAwesome icons to change color at the same time I hover the respective menu text.
    gabrielpinto.pt

    It appears that I would need to add an .fa class to the HTML for this rule to work.
    For the first menu item it would be:

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

    Is there a CSS only alternative?
    If not, is it possible to add it to the next theme’s update?
    Btw, Moesia is awesome!! 😉

Viewing 3 replies - 1 through 3 (of 3 total)
  • vladff

    (@vladff)

    11 years, 4 months ago

    Hello,

    You would need to add this:

    .main-navigation li:hover::before {
    color: #bc4676;
}
.main-navigation li::before
   -webkit-transition: color 0.5s;
   transition: color 0.5s;
}

    The second part is a slightly bigger transition than the one the links have because the icons will start changing color before the links. It’s not perfect, but CSS doesn’t allow targeting parents which would be needed in order to make this perfect.

    Thread Starter GSPinto

    (@gspinto)

    11 years, 4 months ago

    Works perfect for what I want Vlad!

    Thank you for the super fast support!

    Thread Starter GSPinto

    (@gspinto)

    11 years, 4 months ago

    Hi Vlad,

    Yesterday it worked perfectly fine in Chrome.
    Today I find it works only in IE 11 and Firefox.
    Chrome will only change color on the icons, not the text. Text only changes color when I right click on it.

    The only change I made to the site after the above solution, was installing the new Bellow Header Extension and updating settings with the v8.xml

    EDIT: Nevermind, since I remembered that the PC was left suspended from yesterday I restarted Windows and now it works fine on all three browsers.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Changing singular icon color when hovering link’ is closed to new replies.