Avatar of Melody Scott
Melody Scott
Flag for United States of America asked on

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
Web DevelopmentCSSHTML* SCSS

Avatar of undefined
Last Comment
Melody Scott

8/22/2022 - Mon
Jeffrey Dake

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

ASKER
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

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Melody Scott

ASKER
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.
ASKER CERTIFIED SOLUTION
Jeffrey Dake

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Melody Scott

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