CSS伪类hover、active、focus使用技巧

学习文章要努力，但是不要急！今天的这篇文章《CSS伪类\_hover active focus使用技巧》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

:hover用于鼠标悬停时样式，如链接变色；2. :active定义元素被激活时效果，如按钮按下变暗；3. :focus在元素获焦点时生效，提升可访问性，如输入框高亮边框；三者结合使用可增强交互反馈，使界面更友好、响应更直观。

在网页设计中，:hover、:active 和 :focus 是最常用的 CSS 伪类选择器，它们能提升用户交互体验。通过为元素设置不同状态的样式，可以让用户更清楚地感知操作反馈。

1. :hover —— 鼠标悬停时的样式

当用户将鼠标指针移到元素上时，:hover 生效。常用于按钮、链接等可交互元素。

例如，让链接文字在悬停时变红：

a:hover {
  color: red;
}

也可以配合其他元素使用，比如导航菜单项背景变色：

.nav-item:hover {
  background-color: #f0f0f0;
}

2. :active —— 元素被激活时的样式

:active 表示元素正在被点击（鼠标按下但未释放）的状态，通常用于按钮或链接按下瞬间的效果。

例如，点击按钮时让它看起来“被按下”：

button:active {
  background-color: #005bb5;
  transform: scale(0.98);
}

这个状态是临时的，松开鼠标后样式消失。

3. :focus —— 元素获得焦点时的样式

当用户通过 Tab 键或鼠标点击使表单元素（如 input、textarea、button）获得焦点时，:focus 生效。对可访问性非常重要。

比如输入框获得焦点时添加蓝色边框：

input:focus {
  border-color: blue;
  outline: 2px solid #007bff;
}

注意：不要随意移除 outline，否则会影响键盘用户的操作体验。若要自定义，可用 outline 替代方案。

组合使用提升交互效果

多个伪类可以结合使用，实现更细腻的反馈。例如一个按钮同时设置三种状态：

.btn {
  background: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background: #0056b3;
}

.btn:active {
  background: #004085;
}

.btn:focus {
  outline: 2px solid #005eff;
  outline-offset: 2px;
}

这样用户无论是用鼠标悬停、点击，还是用键盘切换焦点，都能看到清晰的视觉反馈。

基本上就这些。合理使用 :hover、:active 和 :focus，能让页面更友好、更具响应感。关键是保持样式自然，不干扰内容，同时兼顾可访问性。不复杂但容易忽略。

到这里，我们也就讲完了《CSS伪类hover、active、focus使用技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS伪类选择器的知识点！