Hover effect wont work after changing color of nested html elements

Question

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>

score 1 · Accepted Answer · answered May 04 '19 at 03:43

1

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

answered May 04 '19 at 03:43

Aditya Thakur

2,562
2
10
21

Hover effect wont work after changing color of nested html elements

1 Answers1