Struggling to update the text color on hover but it remains unchanged.
Using a script to apply the .show class for background changes upon scrolling, which works fine. However, the hover effect for the color CSS property does not take effect.
Various attempts were made to add :hover to alter the color after users scroll down. The goal is to transition from grey to black as users 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>
How can I make the text change color on hover after users have scrolled down?