使用纯CSS制作特效导航条，核心思路是利用伪类选择器捕捉用户交互状态，再配合过渡属性让样式变化更平滑。下面通过一个常见案例，看看如何不写一行JS就实现悬停特效。
基础HTML结构
先准备一个简单的无序列表作为导航容器，每个菜单项是一个链接。结构越清晰，后续CSS越好写。
<nav class="nav-bar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
核心CSS样式
去掉列表默认样式，让菜单横向排列。重点在于a标签的hover状态和transition设置。
.nav-bar ul {
list-style: none;
display: flex;
padding: 0;
margin: 0;
background: #333;
}
.nav-bar li {
margin: 0;
}
.nav-bar a {
display: block;
padding: 14px 20px;
color: #fff;
text-decoration: none;
position: relative;
transition: color 0.3s, background 0.3s;
}
/* 悬停时文字变色与背景高亮 */
.nav-bar a:hover {
color: #ffeb3b;
background: #555;
}
/* 下划线滑动效果 */
.nav-bar a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background: #ffeb3b;
transition: width 0.3s;
}
.nav-bar a:hover::after {
width: 100%;
}
效果说明
上面代码实现了三种纯CSS特效：
- 鼠标移入菜单项时，文字颜色变为黄色
- 背景色轻微变亮，产生高亮反馈
- 底部黄色下划线从左向右展开，增强动感
可扩展思路
如果想做更多变化，可以尝试以下方向：
圆角与阴影
给导航条加border-radius和box-shadow，能做出悬浮卡片风格。
激活状态
用.active类配合相同样式，标记当前页面位置。
响应式收缩
通过@media查询，在窄屏下把flex方向改为纵向。
纯CSS导航条的优势是性能好、易维护，适合大多数展示型网站。当交互需求变复杂时，再引入JavaScript补充即可。
完整示例合并
把结构和样式放到一个文件里就能直接预览：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯CSS导航条</title>
<style>
.nav-bar ul {
list-style: none;
display: flex;
padding: 0;
margin: 0;
background: #333;
}
.nav-bar a {
display: block;
padding: 14px 20px;
color: #fff;
text-decoration: none;
position: relative;
transition: color 0.3s, background 0.3s;
}
.nav-bar a:hover {
color: #ffeb3b;
background: #555;
}
.nav-bar a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background: #ffeb3b;
transition: width 0.3s;
}
.nav-bar a:hover::after {
width: 100%;
}
</style>
</head>
<body>
<nav class="nav-bar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</body>
</html>
按照上面的写法，你就能用纯CSS快速做出带悬停特效的导航条，无需依赖任何脚本库。