CODEWITHSUNDEEP
jqueryhtmlcss
Yotam Dahan
Yotam Dahan

Reputation: 699

On hover change text color

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?

Upvotes: 0

Views: 1735

Answers (3)

Donat Szecsko
Donat Szecsko

Reputation: 51

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'});
  });

Upvotes: 1

V.Volkov
V.Volkov

Reputation: 739

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;  
}

Upvotes: 1

senyou od
senyou od

Reputation: 11

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;
}

Upvotes: 1

Related Questions