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

P粉602998670 2025-11-26 00:00:00 次阅读

: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;
}