Menu Bar – Change link color on hover

Hi again! I think this is the selector you’re look for:

.main-navigation .main-nav ul .current-menu-item > a:hover, .main-navigation .main-nav ul .current-menu-parent > a:hover, .main-navigation .main-nav ul .current-menu-ancestor > a:hover, .main-navigation .main-nav ul .current_page_item > a:hover, .main-navigation .main-nav ul .current_page_parent > a:hover, .main-navigation .main-nav ul .current_page_ancestor > a:hover, .main-navigation .main-nav ul .current-menu-item.sfHover > a, .main-navigation .main-nav ul .current-menu-parent.sfHover > a, .main-navigation .main-nav ul .current-menu-ancestor.sfHover > a, .main-navigation .main-nav ul .current_page_item.sfHover > a, .main-navigation .main-nav ul .current_page_parent.sfHover > a, .main-navigation .main-nav ul .current_page_ancestor.sfHover > a {
    background-color: #3f3f3f;
}

A really useful trick in dev tools is to inspect the element, then right click on the html node and hover “Force Element State.” From there you can choose :hover or any CSS state and easily track down the correct selector.

Oh, you’ll still need to change the color in the piece of CSS.

Hi again Michael! ?

Thank you for the useful info – I never knew that!

I added this code in but it only amends the color on the current item.

Please help me change the hover color when a person hovers over any other menu links.

Thanks so much!

It looks like you might have solved this already?

I did Micheal!
I don’t know how I used your trick and somehow right clicked and boom the piece of code was right there!!

This is it:

.main-navigation .main-nav ul li > a:hover, .main-navigation .main-nav ul li.sfHover > a {
	color: #FFFFFF;
	background-color: #179529;
}

Thanks for your help and trick! ?

That’s great. I struggled with nailing done :hover classes for a long time. Glad you worked it out!

Thank you ?

nice trick.thanks