Need help with a hover statement in SCSS/CSS

Melody Scott
Melody Scott used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jeffrey Dake Senior Director of Technologyy

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

Author

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).
Jeffrey Dake Senior Director of Technologyy

Commented:
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.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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.
Senior Director of Technologyy
Commented:
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

Author

Commented:
Thanks! I am starting from scratch, but pretty sure I'll be using this as I get there.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial