Question

当使用javacript向下滚动时，我不得不更改嵌套HTML元素的字体颜色。然后这些锚点元素的悬停效果将不起作用。产生悬停效果的方法有哪些？

和使用javascript更改 .main-menu ul li a :::

的颜色

我希望我在CSS中应用的悬停效果能够正常工作，但不会实现。

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>

Answer 1

当您使用JavaScript来应用样式时，这些样式将作为内联应用于元素。内联样式具有高度的特异性，将覆盖类样式。有关更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

更改嵌套html元素的颜色后，悬停效果将不起作用

1 个答案: