Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Rebecca Jensen
Rebecca Jensen
11,580 Points

Hovering over hamburger menu made of <hr> tags- want to change color of all 3 <hr>'s, but only one changes

My larger question is- what's the best way to approach changing the color of a mobile hamburger menu 'icon' on hover? I can think of a few ways, but I don't know what's considered best practice.

My specific question, is that I've made a mobile hamburger menu out of <hr> tags...

<li class="menu-burger"><hr></hr><hr></hr><hr></hr></li>
.menu-burger hr {
    width: 16px;
    margin: 4px 0px;
    border: 1px solid #ffffff;
}

It seemed like a good way to get a nice, crisp icon- and it should theoretically be easy to manipulate.

However, when I apply hover to it, of course, only one <hr> triggers at a time...

.menu-burger hr:hover {
    width: 16px;
    margin: 4px 0px;
    border: 1px solid #F15742;
}

Any thoughts on how to deal with this? I've tried targeting just .menu-burger:hover, but then I can't get the inner <hr>'s to do anything, of course.

I've thought of making a whole other hamburger menu icon that I display/hide... but is that seems like perhaps too much code for the task. Or maybe not!

My initial approach was to use a PNG, then I was going to show/hide the PNG depending on whether you're hovering or not... but that seemed maybe a bit hacky.

What's the best practice here? Or, how can I get all three <hr> tags to change on hover?

1 Answer

Steven Parker
Steven Parker
229,921 Points

Change your CSS selector to target them all at once:

Attach your pseudo-element "hover" to the list itself:

.menu-burger:hover hr
Rebecca Jensen
Rebecca Jensen
11,580 Points

Yes, that works! Thank you! I had forgotten that I could put psuedo-elements to that side of the :hover.