Change menu item text colour at same time as background

HTML-CSS
1

Hi all. Fairly new to HTML/CSS. I’m playing around with the styling on one of the projects in the Responsive Web Development course, and I can’t work out how to get the text colour to change at the same time as the background colour when you hover over menu items.

Currently, if you hover over the menu item but not over the text itself, the background colour changes, but not the text. How can I ‘link’ the two so that they both change at the same time? Here the current HTML code concerning the nav bar:

<body>
    <nav id="navbar">
      <header>Coding with Contrast</header>
      <p>A Guide to Accessible Colours in Web Design</p>
      <ul>
        <li>
          <a class="nav-link" href="#Designing_for_Accessibility">Designing for Accessibility</a>
        </li>
        <li>
          <a class="nav-link" href="#Web_Content_Accessibility_Guidelines">Web Content Accessibility Guidelines</a>
        </li>
        <li>
          <a class="nav-link" href="#Accessible_Colour_Contrasts">Accessible Colour Contrasts</a>
        </li>
        <li>
          <a class="nav-link" href="#Coding_for_Colour_Blindness">Coding for Colour Blindness</a>
        </li>
        <li>
          <a class="nav-link" href="#Gradients_and_Textures">Gradients and Textures</a>
        </li>
      </ul>
    </nav>

And here is the CSS relating to those elements:

html {
display: block;
}

body {
font-family: 'Space Grotesk', sans-serif;
line-height: 1.5;
background-color: #16161a;
color: #d1d4dc;
box-sizing: border-box;
}

#navbar {
display: block;
position: fixed;
width: 360px;
min-width: 290px;
height: 100%;
top: 0px;
left: 0px;
border-right: 2px solid #d1d4dc;
}

nav header {
font-weight: 700;
font-size: 1.6rem;
padding-left: 30px;
padding-top: 20px;
color: #2cb67d;
}

nav p {
font-size: 1.3rem;
max-width: 300px;
padding-bottom: 25px;
padding-left: 30px;
padding-top: 10px;
color: #d1d4dc;
}

nav li {
border-top: 2px solid;
border-color: #d1d4dc;
padding-top: 15px;
padding-bottom: 15px;
font-size: 1.3em;
padding-left: 30px;
}

nav li:hover {
background-color: #2cb67d;
}

nav a {
color:
#d1d4dc;
text-decoration: none;
}

nav a:hover {
color: #16161a;
}

I’m particularly interested in making this accessible - it’s why I have an issue with the colours not changing at the same time - so any tips on changes that will further promote accessibility are very welcome!

2

here you are saying that only the background color should change when the li is hovered

you have also this, but you can hover on the li without hovering on the a

you need to have the :hover pseudoclass always on the same element for the effect to happen at the same time

3

Thank you for this. So this is where I’m getting stuck: when I just apply effects to nav li:hover , the text doesn’t change (i.e. if I write color: black;, the colour of the text doesn’t change. I figured that it’s because it’s a , hence the separate effect, but where I’m stuck is working out how to target both the li and a elements with the same :hover at the same time. I presume writing nav li:hover, nav a:hover {} will simply do the same as having them separately?

4

you can try nav li:hover a, so the a inside the hovered li changes