使用无序列表构建导航结构，通过CSS去除默认样式并设置基础布局；2. 为列表项添加:hover伪类改变悬停时背景色与文字颜色；3. 结合transition属性实现0.3秒缓动过渡效果，使颜色变化平滑自然，提升交互体验。
实现列表项悬停时背景色变化，主要依靠CSS的 :hover 伪类和 transition 属性来完成平滑过渡效果。这种方式简单高效，适合初级项目使用。
1. 基础HTML结构
通常使用无序列表 ul 和列表项 li 构建菜单或导航：
- Home
- About
- Services
- Contact
2. 基本CSS样式设置
先为列表设置基本样式，去除默认样式并让列表项横向或纵向排列：3. 使用 :hover 实现悬停变色
当鼠标移到列表项上时，改变背景颜色： 这里 :hover 定义了鼠标悬停状态下的样式，背景变为蓝色，文字变为白色。4. 利用 transition 让颜色变化更自然
transition 属性让背景色从一种颜色渐变到另一种，提升用户体验：- background-color 0.3s：表示背景色在0.3秒内完成变化
- ease：缓动函数，使动画开始慢、中间快、结束慢，更自然
0.5s linear 实现匀速变化。基本上就这些。只要给列表项添加 :hover 状态，并配合 transition，就能轻松实现平滑的背景色切换效果，非常适合新手练习CSS交互样式。不复杂但容易忽略细节，比如忘记设 transition 导致颜色突变。注意测试不同浏览器下的表现，确保一致性。
