通过CSS transition实现导航栏悬停效果，先设置.nav-link的背景色、文字色及0.3秒ease过渡，再定义:hover时背景变#007bff、文字变白，使颜色变化平滑自然，提升交互体验。
在网页设计中，导航栏的悬停效果是提升用户体验的重要细节。通过CSS过渡（transition），我们可以让背景色（background）和文字颜色（color）的变化更加平滑自然，避免生硬的跳变。
1. 基础结构：HTML导航栏
一个常见的导航栏通常由无序列表或链接组成。例如：
<nav class="navbar"> <a href="#" class="nav-link">首页</a> <a href="#" class="nav-link">关于</a> <a href="#" class="nav-link">服务</a> <a href="#" class="nav-link">联系</a> </nav>
2. 设置默认样式与过渡属性
为导航链接设置基础样式，并添加 transition 属性，使 background 和 color 变化有动画效果：
.nav-link {
display: inline-block;
padding: 10px 15px;
margin: 0 5px;
text-decoration: none;
color: #333;
background-color: #f4f4f4;
border-radius: 4px;
<strong>transition: background 0.3s ease, color 0.3s ease;</strong>
}
说明： transition 同时监听 background 和 color 属性，持续时间为0.3秒，使用 ease 缓动函数，使变化更柔和。
立即学习“前端免费学习笔记（深入）”；
3. 悬停状态：改变背景与文字颜色
当用户将鼠标悬停在链接上时，同时改变背景色和文字颜色：
.nav-link:hover {
background-color: #007bff;
color: white;
}
由于已设置 transition，这两个颜色变化会自动以动画形式呈现，而不是瞬间切换。
4. 提升体验的小技巧
- 可以调整 transition 的时间（如 0.2s 更快，0.5s 更缓），根据整体风格选择合适的节奏。
- 使用 ease-in-out 可让动画起止更平滑，适合精致的设计风格。
- 对整个导航栏统一设置 transition，避免个别链接动画不一致。
- 考虑在移动端保留 :hover 效果或改用 focus 状态适配触屏设备。
基本上就这些。合理使用 background 与 color 的结合过渡，能让导航栏更具交互感，又不会喧宾夺主。关键是让变化自然，符合用户预期。不复杂但容易忽略。
