On hover change text color

Question

I'm trying to change text color on hover but the color stays the same as it were before.

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

How can I change the color on hovering once the user have scrolled down?

Answer 1

You have wrong order elements of classes here:

.show:hover .navigation-bar li a {
  color: black;
}

This one would be correct:

.navigation-bar .show:hover li a {
  color: black;  
}

Answer 2

You must define a css rule when the .show is added.

add this line in your CSS :

.show  div#navigation-container ul li a{
  color:#000;
}

Answer 3

I don't know if I get you right or not, but this is changing the navbar's text color on hover

$('#navigation-container').hover(function() {
    $('li > a').css({'color':'black'});
  }, function() {
    $('li > a').css({'color':'grey'});
  });