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 trialRebecca Jensen
11,580 PointsHow do I target 'hovering the current menu item link'?
This video addresses how to make the Bootstrap hover style work again (make the background #000), but the bug is that when you hover over the current menu item, it doesn't show the correct style (background changes to gray, instead of staying black).
How should I target the current-menu-item link while hovering? I've tried .current-menu-item > a:hover and some other things, with no success.
3 Answers
Marko Rapaic
13,871 PointsHi Rebecca,
I believe it would look like this:
.current-menu-item a:hover {
/* insert current menu item styles here */
}
Luke Bailey
3,343 PointsHi Rebecca and Marko,
I had a moment of confusion over this also. It's a very simple answer and solution, but one that could be easily overlooked. Because you're still using the .current-menu-item you won't see any changes. This selector only affects the current menu item - we want to select any menu item when hovered.
This is the correct code to use:
.menu-item:hover {
background:#000;
}
Marko Rapaic
13,871 PointsThanks for responding Luke, I believe the code you've provided would target the hover states of ALL menu items; not the current menu item specifically, which is what I believe Rebecca was trying to target.
Sanjeev Veloo
4,713 PointsThanks Luke! That worked just fine :)