伪类是CSS中实现交互效果的核心工具。通过:hover可实现按钮悬停变色、下拉菜单显示和图片滤镜等视觉反馈，结合transition使动画更流畅；:active用于模拟元素被按下状态，如按钮内陷或链接点击变色，增强操作真实感。两者应按LVHAR顺序（:link, :visited, :hover, :active, :focus）定义，避免样式覆盖，且在移动端需谨慎使用:hover，因触屏设备不支持悬停。还可结合:focus提升可访问性，:focus-visible区分键盘焦点，以及现代浏览器支持的:has()实现父元素根据子元素状态变化，如导航菜单箭头显示。合理组合这些伪类，无需JavaScript即可创建丰富、直观的用户交互体验。
在CSS项目中，伪类是实现用户交互效果的核心工具之一。通过 :hover 和 :active 等动态伪类，可以轻松为按钮、链接、菜单等元素添加视觉反馈，提升用户体验。这些伪类不需要JavaScript即可响应用户的操作行为，既高效又轻量。
使用 :hover 实现悬停效果
:hover 伪类在用户将鼠标指针移到元素上时触发，是最常用的交互样式手段。
常见应用场景包括：- 按钮颜色变化：提升可点击感
- 下拉菜单显示：配合 display 或 opacity 控制子菜单出现
- 图片缩放或滤镜：增强视觉吸引力
示例代码：
.button {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
transition: background 0.3s;
}
.button:hover {
background: #0056b3;
cursor: pointer;
}
加入 transition 可使颜色变化更平滑，避免突兀跳变。
立即学习“前端免费学习笔记（深入）”；
使用 :active 实现按下状态
:active 伪类在元素被激活（如鼠标按下）的瞬间生效，适合模拟“按下”反馈。
典型用途：- 按钮内陷效果：通过调整 padding 或背景位置模拟按压
- 链接点击反馈：短暂改变文字颜色或大小
- 表单元素状态提示：输入框聚焦前的预激活样式
示例：
.button:active {
transform: translateY(1px);
box-shadow: none;
}
这个效果让按钮看起来像是被“压下去”，增强操作的真实感。
组合使用 hover 与 active 的最佳实践
合理安排伪类顺序，避免样式覆盖问题。推荐遵循 LVHAR 顺序（:link, :visited, :hover, :active, :focus），尤其注意 :hover 应在 :active 前定义。
.btn:link { ... }
.btn:visited { ... }
.btn:hover { ... }
.btn:focus { ... }
.btn:active { ... }
移动端需谨慎使用 :hover，因为部分设备不支持悬停。可通过媒体查询判断触屏环境，避免误用。
扩展技巧：结合其他伪类增强交互
除了基础的 :hover 和 :active，还可搭配以下伪类创建更丰富的交互：
- :focus：键盘导航和表单操作的重要补充
- :focus-visible：仅在键盘触发时显示焦点框，兼顾可访问性与美观
- :has()（现代浏览器支持）：父元素根据子元素状态改变样式，例如菜单项包含子菜单时才显示箭头
例如：
.nav-item:hover > .submenu,
.nav-item:has(.submenu:hover) > .submenu {
display: block;
}
基本上就这些。合理利用 :hover 和 :active，再配合过渡动画和其他伪类，就能构建出直观且流畅的交互体验，无需一行JS也能让界面“活”起来。
