悬停时更改文本颜色

我试图在悬停时更改文本颜色,但颜色保持与以前相同。

I'm using script to add class named .show to change background while scrolling, it works, also the hovering elements works but the color CSS element fails to change.

Here are some attempts of adding :hover to change the color after the user scroll downwards. I would like the color to change from grey to black once the user scroll downwards.

.navigation-bar li a {
  display: inline;
  color: lightgrey;
  text-decoration: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  line-height: 70px;
  transition: 0.2s ease color;
  position:relative;
}
.show:hover .navigation-bar li a {
  color: black;
}
.bg {
  width: 100%;
  height: 70px;
  opacity: 1;
}
.show {
  background-color: #bdbdbd;
  opacity: 0.5;
}
.show:hover{
  background-color: #ebe4dd;
  color: black;
  opacity: 1;
}

HTML:

<div class="navigation-bar">
  <div class="bg transition">

<div id="navigation-container">
  <a href="#"><img src="images/logo.png"></a>

  <ul>
    <li><a href="#title">About</a></li>
    <li><a href="#section1">Projects</a></li>
    <li><a href="#section2">Services</a></li>
    <li><a href="#section3">Get in Touch</a></li>
  </ul>
</div>
</div>
</div>

Codepen

用户向下滚动后,如何在悬停时更改颜色?