如何使用CSS/jQuery修改网站顶部菜单hover状态的蓝色为黑色

参考效果图：

你写的样式不生效是常见的CSS优先级或选择器匹配错误问题，按下面的步骤排查修改即可：

1. 优先排查选择器匹配问题 #

绝大多数菜单的hover颜色是控制菜单内的<a>标签，而非外层容器，你之前的选择器只写了外层容器的hover，自然不会生效，修改选择器如下：

<style>
/* 匹配菜单下的a标签的hover状态 */
#menu-top a:hover {
  color: #000;
}
.nav-menu li a:hover {
  color: #000;
}
</style>

2. 解决CSS优先级不足问题 #

如果修改选择器后仍不生效，说明你写的样式优先级低于网站原有默认样式，可以先加!important验证是否是优先级问题：

<style>
#menu-top a:hover {
  color: #000 !important;
}
.nav-menu li a:hover {
  color: #000 !important;
}
</style>

验证生效后，你可以通过浏览器F12开发者工具查看原有菜单hover样式的选择器，写一个比它优先级更高的选择器即可替换掉!important。

3. 其他颜色属性适配 #

如果你要改的蓝色不是文字颜色，是背景、底部边框或文字下划线颜色，对应修改对应属性即可：

<style>
/* 修改hover背景色为黑色 */
#menu-top a:hover {
  background-color: #000 !important;
}
/* 修改hover底部边框色为黑色 */
#menu-top a:hover {
  border-bottom: 2px solid #000 !important;
}
/* 修改hover文字下划线颜色为黑色 */
#menu-top a:hover {
  text-decoration-color: #000 !important;
}
</style>

jQuery备选实现方案 #

如果CSS调整始终有冲突，可以用jQuery绑定hover事件实现效果：

<script>
$(function() {
  // 第一个参数是鼠标移入回调，第二个是移出回调
  $('.nav-menu li a').hover(
    function() { $(this).css('color', '#000') },
    function() { $(this).css('color', '') }
  )
})
</script>

快速排查技巧 #

按F12打开浏览器开发者工具，选中对应的菜单元素，在样式面板勾选:hov下的hover选项，就能直接看到当前控制hover样式的生效选择器和属性，照着对应修改即可100%匹配生效。

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