Need help with a hover statement in SCSS/CSS

Hi, on http://dev2.magickitchen.com, I have orange down arrows on the main nav.
Capture.JPG
I want that to turn white on hover. The scss code I have for it is:

.site-header .navbar span.glyphicon-menu-down-orange:before {
    content: url(../img/arrow-small-pale-orange.svg);
}

So I was trying:
.site-header .navbar span.glyphicon-menu-down-orange:before {
    content: url(../img/arrow-small-pale-orange.svg);
      
      &:hover {
    content: url(../img/arrow-small-white.svg);
}
}

But that didn't work. I sense I am close though. Can someone help me out? Thanks.

If you need to log onto the page, I've attached the credentials.
credentials.txt
mel200Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jeffrey Dake Senior Director of TechnologyCommented:
There are several options you could do.  First you could change your html, but the easiset might be to use some javascript.  If you could on hover change the css the css completely so that you are still using your same css but without the hover state in the css.

https://www.w3schools.com/jquery/event_hover.asp
0
mel200Author Commented:
I'd rather not have to use jquery, isn't there just some CSS I could add? What I was trying to do in my example was add a class on hover that changed the color of the arrow. (Actually changes the image).
0
Jeffrey Dake Senior Director of TechnologyCommented:
You already try?  I wasn't really thinking but I thought that works

site-header .navbar span.glyphicon-menu-down-orange:hover:before {
    content: url(../img/arrow-small-white.svg);
}

Open in new window


I am pretty sure it works if you put the hover first.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

mel200Author Commented:
You're right, that worked! Thanks, I was going about it wrong. But there's something else; look here: https://www.magickitchen.com

The arrow is tied into the word, so if you hover over the word, the arrow changes as well. But it doesn't on the http://dev2.magickitchen.com/.

Any idea why? I'll see if I can figure it out as well.
0
Jeffrey Dake Senior Director of TechnologyCommented:
Mover your rule up so the :hover is on the Anchor.  Something like

site-header .navbar .dropdown-toggle:hover span.glyphicon-menu-down-orange:before {
    content: url(../img/arrow-small-white.svg);
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
Thanks! I am starting from scratch, but pretty sure I'll be using this as I get there.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.