使用HTML的ul和li构建导航结构，为当前页链接添加.active类高亮；2. CSS通过Flexbox实现横向布局，:hover触发平滑悬停效果，.active突出当前页面；3. 媒体查询在屏幕宽度≤768px时将flex-direction设为column，实现移动端垂直堆叠，链接间添加边框分隔；4. 通过transition优化背景色变化动画，可结合JavaScript动态控制active类或汉堡菜单显隐，确保桌面与移动设备均具备良好交互体验。
实现一个响应式导航栏，并带有高亮当前页面和悬停效果，是网页设计中的常见需求。关键在于结合 HTML 结构、CSS 媒体查询与伪类的合理使用，确保在桌面端和移动端都能有良好的交互体验。
导航栏通常使用 ul 和 li 构建列表结构，每个链接对应一个菜单项。为当前页面对应的链接添加 .active 类，用于高亮显示。
通过 CSS 设置导航栏布局，使用 Flexbox 实现横向排列，并定义悬停和激活状态的视觉反馈。
.navbar { display: flex; background-color: #333; list-style: none; margin: 0; padding: 0; } .navbar a { color: white; text-decoration: none; padding: 14px 20px; display: block; transition: background-color 0.3s ease; } .navbar a:hover { background-color: #555; } .navbar a.active { background-color: #007cba; font-weight: bold; }说明：hover 效果通过 :hover 实现平滑背景色变化；active 类使用鲜明颜色突出当前页面。
立即学习“前端免费学习笔记（深入）”；
当屏幕变窄时，使用媒体查询将导航栏折叠为汉堡菜单或垂直堆叠显示。
@media (max-width: 768px) { .navbar { flex-direction: column; } .navbar a { text-align: center; border-bottom: 1px solid #444; } }在小屏幕上，flex-direction 改为 column，使菜单垂直排列。每个链接加上下边框以区分项，提升可读性。
以上就是css响应式导航栏高亮与悬停效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
345
收藏
