如何使用CSS伪类选择器_hover active focus状态样式-css教程-PHP中文网

如何使用CSS伪类选择器_hover active focus状态样式

P粉602998670

发布： 2025-11-26 20:17:02

原创

932人浏览过

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

如何使用css伪类选择器_hover active 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);
}

登录后复制

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

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

266

查看详情

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

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

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

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

登录后复制

注意：不要随意移除 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状态样式的详细内容，更多请关注php中文网其它相关文章！