通过css的:hover和:active伪类实现导航栏高亮，1. 创建html导航结构；2. 用css设置导航样式，去除列表符号并设为弹性布局；3. 鼠标悬停时改变背景与文字颜色；4. 点击时触发active状态，添加缩放反馈；5. 可手动添加active类标识当前页面。关键细节包括去除默认下划线、设块级显示等，使交互更自然流畅。
实现导航栏的高亮效果，主要通过CSS中的 :hover 和 :active 伪类来完成。这两个状态能提升用户的交互体验，让用户清楚当前操作的是哪个链接。下面是一个简单的初级项目示例，教你一步步实现这些效果。
1. 基础HTML结构
先创建一个简单的水平导航栏结构：
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
2. 使用CSS设置基本样式
为导航栏添加基础样式，使其看起来更整洁：
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
background-color: #333;
}
nav ul li a {
display: block;
padding: 14px 20px;
color: white;
text-decoration: none;
text-align: center;
}
3. 添加:hover悬停高亮效果
当鼠标移到链接上时，改变背景颜色或文字颜色，提示用户当前选中项：
立即学习“前端免费学习笔记（深入）”；
nav ul li a:hover {
background-color: #555;
color: #ffeb3b;
}
这个状态会在用户将鼠标指针放在链接上时立即生效，是增强可交互性的关键。
4. 使用:active实现点击瞬间反馈
当用户点击某个链接时，:active 状态会短暂激活，可用于提供“按下”效果：
nav ul li a:active {
background-color: #777;
transform: scale(0.98);
}
这种视觉反馈让用户感知到系统已接收到点击操作，提升响应感。
5. 可选：给当前页面链接加 active 类（模拟）
虽然 :active 是临时点击状态，但如果你想高亮“当前页面”的导航项，可以手动添加一个类：
nav ul li a.active {
background-color: #007bff;
font-weight: bold;
}
然后在对应链接加上 class="active"，比如：
<li><a href="#home" class="active">首页</a></li>
基本上就这些。通过组合使用 :hover 和 :active，再加上手动添加的 active 类，就能实现一个功能完整、反馈清晰的导航栏。不复杂但容易忽略细节，比如去掉默认下划线、设置块级显示等，都是让效果更自然的关键。
