如何使用CSS实现导航栏<a>标签hover时背景与文字颜色切换

我来帮你调整代码，实现你想要的悬停效果——其实你的思路已经对了，只需要微调几个地方让效果更贴合导航栏的场景：

修正后的完整CSS代码 #

#navbar { 
  background-color: #333; 
  color: #fff; 
  padding: 10px; 
}
#navbar ul { 
  padding: 0; 
  list-style: none; 
  margin: 0; /* 去掉默认margin，让导航项和栏边对齐 */
}
#navbar li { 
  display: inline-block; /* 改成inline-block，方便控制padding的上下效果 */
}
#navbar a { 
  color: #fff; 
  text-decoration: none; 
  font-size: 18px; 
  padding: 10px 15px; /* 增加上下padding，让悬停背景撑满导航栏高度 */
  display: block; /* 让a标签的点击区域覆盖整个li的范围 */
}
#navbar a:hover { 
  background-color: #fff; 
  color: #333; 
}

关键修改说明 #

• 把#navbar li的display: inline改成inline-block，同时给#navbar a设置display: block和上下方向的padding：这样悬停时的白色背景会完整覆盖导航栏的垂直区域，而不是只围绕文字显示一小块，视觉效果更协调。
• 用#navbar a:hover替代全局的a:hover：提高选择器优先级，避免这个悬停样式影响页面中其他无关的<a>标签。
• 去掉了全局的a { padding-left: 10px; }：把这个内边距整合到#navbar a的统一padding设置里，避免样式冲突。

这样修改后，当你鼠标悬停在home、aboutme、contact任意一个导航项上时，就会触发背景色变白、文字变深灰的效果，和黑色导航栏形成清晰的交互反馈~

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