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

当使用JavaScript向下滚动时，我必须更改嵌套HTML元素的字体颜色。那么这些锚元素的悬停效果就不起作用了。有哪些方法可以产生悬停效果

和javascript更改的颜色。主菜单ul li a：

我希望我在CSS中应用的悬停效果能够工作，但它不会

window.onscroll=function（）{scrollFunction（）}；
函数滚动函数（）{
如果（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.queryselectoral（“.main menu ul li a”）
linksToChange.forEach（函数（toChange）{
toChange.style.color=“#242423”；
});
}
否则{
document.getElementById（“navbar”）.style.backgroundColor=“透明”；
document.getElementById（“navbar”）.style.boxShadow=“无”；
document.getElementById（“navbar”）.style.padding=“40px 100px”；
document.querySelector（“.main logo a”）.style.color=“#fcfdfc”；
var linksToChange=document.queryselectoral（“.main menu ul li a”）
linksToChange.forEach（函数（toChange）{
toChange.style.color=“#242423”；
});
}
}

。主菜单ul li a{
颜色：#fcfdfc；
文本转换：大写；
字号：500；
显示：块；
}
.主菜单ul li a：悬停{
颜色：#ba782a；
}

使用javascript应用样式时，样式将作为内联应用到元素。内联样式具有很高的特殊性，将覆盖类样式。 有关更多信息：