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