当标签的颜色已经使用javascript管理时，无法为标签添加悬停效果?

Question

我有一个网站(https://lunarcreator.uk)。我为它做了一个导航条，它的变化超出了一定的y偏移量(>,& lt;100)，以便在滚动时背景和内容清晰。

我有下面的javascript来做到这一点:

const logo = document.querySelector('#pronav')
const about = document.querySelector('#about')
const log_text = document.querySelector('#log_text')
const link1 = document.querySelector('#link1')
const link2 = document.querySelector('#link2')
const link3 = document.querySelector('#link3')
const getOffset = () => {
if(window.pageYOffset > 100){
logo.style.backgroundColor = 'white';
logo.style.transition = 'background .2s ease-out';
log_text.style.color = 'black';
link1.style.color = 'black';
link2.style.color = 'black';
link3.style.color = 'black';
}
if(window.pageYOffset < 100){
logo.style.backgroundColor = 'rgba(0,0,0,0)';
logo.style.transition = 'background .2s ease-out';
log_text.style.color = 'white';
link1.style.color = 'white';
link2.style.color = 'white';
link3.style.color = 'white';
}
}
window.addEventListener('scroll', getOffset)

const link_n指导航条中特定的a标签。但是，在滚动上添加这个更改时，我失去了具有悬停效果的标签的功能在滚动。我尝试使用:hover

在css中指定hover但这行不通。我怎么能解决这个问题呢?谢谢你的时间。(我有非常少的javascript知识，所以我认为这是最好的地方来回答)

Answer 1

在滚动页眉后添加class会更好。

let header = document.querySelector('.header');
const getOffset = () => {
if(window.pageYOffset > 100){
header.classList.add('fixed');
} 
else {
header.classList.remove('fixed');
}
}
window.addEventListener('scroll', getOffset)

然后根据头类编辑样式。

.header a {
color: #FFF;
}
.header.fixed {
background: #fff;
}
.header.fixed a {
color: #000;
}
.header.fixed a:hover {
color: blue;
}

小提琴在这里:https://jsfiddle.net/oLtvjwhe/

编辑:避免使用Allan建议的!important

甚至连w3schools都把它放在底部"提示:知道这个重要规则是很好的，你可能会在一些CSS源代码中看到它。然而，不要使用它，除非你绝对必须。在这种情况下，你不需要!important.

Answer 2

使用CSS重要规则https://www.w3schools.com/css/css_important.asp

:

.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF !important;
}

希望能成功。

Answer 3

考虑以父类#pronav为目标。然后，只需添加一个fade-to-white类:

const FADE_TO_WHITE = 'fade-to-white'
const pronav = document.querySelector('#pronav')
const getOffset = () => {
window.pageYOffset > 100 
? pronav.classList.add(FADE_TO_WHITE)
: pronav.classList.remove(FADE_TO_WHITE)
}

然后使用css:

定位子元素

#pronav.fade-to-white a {
color: black;
}
#pronav a {
color: white;
}
#pronav.fade-to-white a:hover {
color: blue; /* change this */
}
/* continue like this */