I had to change the font color of nested HTML elements when scrolled down with javacript. Then the hover effect of those anchor elements wont work. What are the ways to have the hover effect?

And javascript to change the color of .main-menu ul li a :::

I want the hover effect that I have applied in CSS to work, but it wont.

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.backgroundColor = "#fcfdfcfa";
    document.getElementById("navbar").style.boxShadow = "0 0 10px #33353350";
    document.getElementById("navbar").style.padding = "10px 100px";
    document.querySelector(".main-logo a").style.color = "#242423";

    var linksToChange = document.querySelectorAll(".main-menu ul li a")
        linksToChange.forEach(function(toChange) {
        toChange.style.color = "#242423";
    });
  }
  else {
    document.getElementById("navbar").style.backgroundColor = "transparent";
    document.getElementById("navbar").style.boxShadow = "none";
    document.getElementById("navbar").style.padding = "40px 100px";
    document.querySelector(".main-logo a").style.color = "#fcfdfc";

    var linksToChange = document.querySelectorAll(".main-menu ul li a")
        linksToChange.forEach(function(toChange) {
        toChange.style.color = "#242423";
    });
  }
}
.main-menu ul li a {
    color: #fcfdfc;
    text-transform: uppercase;
    font-weight: 500;
    display: block;
}
.main-menu ul li a:hover {
    color: #ba782a;
}
<div class="main-menu">
     <ul>
         <li><a href="menu.html">Menu</a></li>
         <li><a href="gallery.html">Gallery</a></li>
         <li><a href="dine.html">Dine</a></li>
         <li><a href="reserve.html">Reserve</a></li>
         <li><a href="contact.html">Contact</a></li>
      </ul>
 </div>

1 Answers

1
Aditya Thakur On Best Solutions

When you use javascript to apply style, the styles are applied as inline to the elements. Inline Styling has high specificity and will override class styling. For more info : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity