使用JavaScript控制a标签颜色后无法添加hover效果如何解决？

问题原因 #

通过JavaScript直接修改元素style属性设置的是行内样式，优先级远高于CSS中定义的伪类样式，因此你写的:hover样式会被JS设置的行内样式强制覆盖，无法生效。

解决方案 #

最优方案是放弃直接修改行内样式，改为通过JS切换导航栏父元素的类名，所有样式规则统一放在CSS中管理，既可以解决hover优先级问题，也能简化后续样式维护逻辑。

1. 替换原JS代码 #

const pronav = document.querySelector('#pronav')

const updateNavStyle = () => {
  // 滚动偏移量大于100时给导航栏加scrolled类，否则移除
  pronav.classList.toggle('scrolled', window.pageYOffset > 100)
}

// 监听滚动事件
window.addEventListener('scroll', updateNavStyle)
// 页面加载时立刻执行一次，避免刷新后滚动位置异常导致样式错误
updateNavStyle()

2. 补充CSS样式 #

先给所有导航a标签统一加一个类名比如nav-link，避免逐个选择ID，然后添加以下CSS规则：

/* 导航栏默认样式（滚动距离小于100px时生效） */
#pronav {
  background-color: rgba(0,0,0,0);
  transition: background .2s ease-out;
}
#pronav #log_text,
#pronav .nav-link {
  color: white;
}

/* 滚动距离大于100px时的样式 */
#pronav.scrolled {
  background-color: white;
}
#pronav.scrolled #log_text,
#pronav.scrolled .nav-link {
  color: black;
}

/* 导航链接hover样式，规则优先级更高会覆盖默认颜色 */
#pronav .nav-link:hover {
  color: #ff0000; /* 替换为你需要的hover颜色即可 */
  /* 其他hover效果比如下划线、透明度都可以在这里加 */
}

临时替代方案（不推荐） #

如果暂时不想修改JS代码，也可以在CSS的hover规则后加!important强制提升优先级，绕过行内样式的限制：

#link1:hover,
#link2:hover,
#link3:hover {
  color: 你要的颜色 !important;
}

这种方式会破坏样式优先级规则，后续维护容易出问题，仅作为临时救急使用。

内容的提问来源于stack exchange，提问作者some_user_3