答案：通过CSS的:hover伪类可实现导航栏悬停变色。首先构建ul+li的HTML结构，用CSS设置无列表样式、水平排列和基础颜色；然后为nav a添加:hover状态，修改background-color和color实现视觉变化；最后通过transition属性增添背景色渐变过渡效果，提升用户体验。注意去除文本下划线并设置display:block以确保点击区域完整。
要实现导航栏在鼠标悬停（hover）时改变背景色，可以通过CSS的 :hover 伪类来设置。下面是一个简单实用的方法。
1. 基本HTML结构
假设你的导航栏使用的是 ul 和 li 结构：
2. 添加基础样式
先给导航栏一些基本样式，让它看起来像一个水平导航条：
3. 设置 hover 背景色
使用 :hover 给链接添加悬停背景色：
立即学习“前端免费学习笔记（深入）”；
- 当鼠标移到导航项上时，背景会变成蓝色，文字变白
- 你可以根据设计需要修改颜色值，比如 #ff6b6b（红色系）、#4caf50（绿色）等
4. 可选：添加过渡效果更自然
为了让背景色变化更平滑，可以加上过渡动画：
- 这样颜色不会突变，而是渐变过渡
- 用户体验更好，尤其适合现代网页设计
