通过添加.active类实现当前页高亮，结合:hover和:focus提升交互体验，HTML中为当前页面链接手动添加class=”active”，CSS设置对应样式。
要实现导航栏中当前页面对应链接的高亮效果，可以通过 CSS 伪类结合 HTML 结构来完成。虽然伪类如 :hover、:active 能处理交互状态，但“当前页高亮”通常需要手动添加一个类（如 .active）来标识当前页面对应的导航项。
1. 使用 :hover 实现鼠标悬停高亮
当用户将鼠标移到导航项上时，可以使用 :hover 伪类改变样式。
nav a:hover { background-color: #007cba; color: white;}
2. 使用 .active 类实现当前页高亮
CSS 本身无法自动识别哪个是当前页面，因此需要在 HTML 中为当前页面的链接添加 class=”active”，再用 CSS 设置高亮样式。
nav a.active { background-color: #005f8a; color: white; font-weight: bold;}
对应的 HTML 示例：
TextCortex
AI写作能手，在几秒钟内创建内容。
62 查看详情
立即学习“前端免费学习笔记（深入）”；
3. 可结合 :focus 实现键盘可访问性
为了提升无障碍体验，可以为聚焦状态也设置类似高亮。
nav a:focus { outline: 2px solid #007cba;}
基本上就这些。通过手动添加 .active 类配合 CSS 样式，就能实现导航栏的高亮效果。:hover 和 :focus 可增强交互体验，但真正的“当前页高亮”依赖结构和类名控制。
以上就是如何通过css实现导航栏伪类高亮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/974454.html
微信扫一扫 
支付宝扫一扫 
