Melody Scott
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.
I want that to turn white on hover. The scss code I have for it is:
.site-header .navbar span.glyphicon-menu-down-o range:befo re {
content: url(../img/arrow-small-pal e-orange.s vg);
}
So I was trying:
.site-header .navbar span.glyphicon-menu-down-o range:befo re {
content: url(../img/arrow-small-pal e-orange.s vg);
&:hover {
content: url(../img/arrow-small-whi te.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
I want that to turn white on hover. The scss code I have for it is:
.site-header .navbar span.glyphicon-menu-down-o
content: url(../img/arrow-small-pal
}
So I was trying:
.site-header .navbar span.glyphicon-menu-down-o
content: url(../img/arrow-small-pal
&:hover {
content: url(../img/arrow-small-whi
}
}
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
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).
You already try? I wasn't really thinking but I thought that works
I am pretty sure it works if you put the hover first.
site-header .navbar span.glyphicon-menu-down-orange:hover:before {
content: url(../img/arrow-small-white.svg);
}
I am pretty sure it works if you put the hover first.
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks! I am starting from scratch, but pretty sure I'll be using this as I get there.
https://www.w3schools.com/jquery/event_hover.asp