当前页高亮必须通过HTML类名（如class="active"）配合CSS实现，:hover仅用于悬停交互反馈，:active仅用于点击瞬间视觉反馈，二者均无法持久标记当前页面。
导航栏的高亮状态通常靠 :hover 和 :active 伪类实现，但要注意：它们只在鼠标悬停或点击瞬间生效，无法持久标记当前页面对应的菜单项。真正“当前页高亮”需结合 HTML 类名（如 class="active"）+ CSS 样式，:hover 和 :active 更适合交互反馈。
1. hover 是悬停时的临时高亮
用于提升可用性，告诉用户“这个能点”。它不记录状态，移开鼠标就恢复。
- 写法示例：
a:hover { color: #007bff; } - 建议搭配过渡效果更自然：
a { transition: color 0.2s; } - 注意顺序：CSS 中
:hover应写在:link和:visited之后，否则可能被覆盖
2. active 是点击瞬间的视觉反馈
:active 只在鼠标按下、手指按住时生效（松开即消失），常用于按钮按压感，不适合做“当前页标识”。
- 示例：
a:active { transform: translateY(1px); } - 移动端需加
cursor: pointer或监听touchstart才更可靠 - 单独用
:active无法保持高亮——它不是状态标记，而是动作快照
3. 当前页高亮必须靠 class="active"
服务端渲染（如 PHP、Jinja）或前端路由（如 Vue Router、React Router）应在当前导航项上动态添加 active 类，再用 CSS 定义样式。
立即学习“前端免费学习笔记（深入）”；
- HTML 示例：
关于 - CSS 示例：
.nav-link.active { color: #007bff; font-weight: 600; } - 可同时支持 hover + active 状态：
.nav-link.active:hover { color: #0056b3; }
4. 进阶：用 JavaScript 动态设置 active（简易版）
若无路由库，可基于当前 URL 路径自动标记：
- 获取当前路径：
const path = window.location.pathname; - 遍历导航链接，匹配
href是否包含该路径 - 给匹配项添加
active类，同时移除其他项的该类 - 注意：需处理根路径
/和子路径（如/blog/123匹配/blog）的逻辑
不复杂但容易忽略：hover 和 active 解决的是“交互反馈”，而真正的“当前页高亮”是数据状态问题，得靠类名驱动。两者配合使用，体验才完整。
