Menu with icons not changing color when hovering over

HTML/CSS
1

Hello.

When I hover over my menu list only the icons change color but the words within the tags don’t. Words only change when the mouse is directly above them. My HTML code is similar to the solution but without any classes defined. What am I missing?

menu_icons
2

Hi @Mesh,

The short answer:

change your styles to the following:

li {
   list-style: none;
   background-color: #2a2138;
   color: #cfc6dc;
   padding: 0.5rem;
}

a {
   text-decoration: none;
   color: inherit;
}

li:hover {
   color: #fff;
}

The long answer (explanation):

An anchor tag("<a>") has its own default style - usually blue when unfollowed, purple after you’ve visited, underlined, hand cursor etc…

You are obviously trying to override that style so your menu “looks” like, well, a menu.

The problem however is that you’ve styled the color of the <a> on line 22. This style will then be respected unless it is overridden.

However when you hover over the <li> (and NOT on the <a>) the logic is that you have ONLY hovered on the <li> and NOT on the <a>. Therefore the color defined above still applies… You have NOT hovered on the <a> and so it repects the pinkish color as defined above.

So, the simple way around this is to separate the style of the <li> from the style of the <a> (as above) and then ONLY style the <a> on the NEEDED properties (i.e. color and text-decoration).

And the final key of the magic here is to use “inherit” for the color property which tells the <a> to use the same color as its container (parent). So, when the <li> color changes, so does the <a>.

Hope this helps.

3

Hi @wcroteau

Thank you so much for the explanation, you made me understand what’s happening.

Thank you :+1: