在网页项目中，交互反馈是提升用户操作感知的关键部分，CSS提供的hover和focus伪类可以直接通过样式变化实现无JavaScript的交互反馈，覆盖鼠标操作和键盘操作两类常见场景。
CSS hover状态的基础应用
hover伪类用于匹配用户鼠标指针悬停在元素上方时的状态，适用于所有可交互的视觉元素，比如按钮、导航链接、卡片等。
基础语法
hover伪类的语法格式为选择器:hover { 样式规则 }，当鼠标移动到对应选择器匹配的元素上时，就会应用花括号内的样式。
常见应用场景
- 按钮悬停变色：用户鼠标移到按钮上时，改变背景色提示可点击
- 导航项高亮：鼠标悬停在导航链接上时，添加下划线或改变文字颜色
- 卡片悬浮效果：鼠标移到内容卡片上时，添加阴影或轻微放大效果
代码示例
下面是一个按钮hover效果的完整实现：
/* 基础按钮样式 */
.btn {
padding: 10px 20px;
background-color: #1890ff;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease; /* 添加过渡动画让效果更平滑 */
}
/* 鼠标悬停时的样式 */
.btn:hover {
background-color: #40a9ff;
}
CSS focus状态的基础应用
focus伪类用于匹配元素获得焦点时的状态，主要用于表单元素、可点击的交互元素，能够响应键盘Tab键切换焦点的操作，提升网页的无障碍访问性。
基础语法
focus伪类的语法格式为选择器:focus { 样式规则 }，当元素被用户点击、或者通过Tab键选中获得焦点时，就会应用对应的样式。
常见应用场景
- 表单输入框聚焦：输入框获得焦点时，改变边框颜色或添加外发光效果
- 可点击元素焦点提示：按钮、链接通过Tab键选中时，添加明显的焦点样式
- 自定义组件焦点状态：自定义的下拉框、开关组件获得焦点时，给出视觉反馈
代码示例
下面是一个输入框focus效果的完整实现：
/* 基础输入框样式 */
.input {
padding: 8px 12px;
border: 1px solid #d9d9d9;
border-radius: 4px;
outline: none; /* 移除浏览器默认的焦点轮廓 */
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* 输入框获得焦点时的样式 */
.input:focus {
border-color: #1890ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
hover与focus状态的搭配使用
在实际项目中，通常需要同时处理hover和focus状态，覆盖鼠标和键盘两类操作场景，避免只做一种状态导致部分用户操作没有反馈。
搭配使用的注意事项
- 不要只给可交互元素加hover样式而忽略focus样式，否则键盘操作用户无法感知元素状态
- focus样式通常需要比hover样式更明显，因为焦点状态是用户主动选中操作的状态
- 可以统一提取公共的交互反馈样式，减少重复代码
组合代码示例
下面是一个同时处理按钮hover和focus状态的示例：
/* 基础按钮样式 */
.action-btn {
padding: 8px 16px;
background-color: #52c41a;
color: #ffffff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
/* 鼠标悬停效果 */
.action-btn:hover {
background-color: #73d13d;
}
/* 获得焦点效果 */
.action-btn:focus {
background-color: #73d13d;
outline: none;
box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.3);
}
常见问题与解决方案
如何移除浏览器默认的focus轮廓
浏览器默认会给获得焦点的元素添加蓝色轮廓，很多开发者想要自定义这个样式，可以通过设置outline: none移除默认轮廓，同时自定义focus的样式，避免无障碍访问问题。
hover和focus状态冲突怎么办
两者不会冲突，hover是鼠标悬停状态，focus是焦点状态，元素可以同时处于两种状态，样式会叠加生效，只需要合理设置样式的优先级即可。
移动端如何适配这两种状态
移动端没有鼠标悬停操作，hover状态通常不会触发，但是focus状态在点击元素时依然会生效，所以移动端可以只保留focus相关的反馈样式，或者针对移动端做媒体查询调整hover逻辑。
| 伪类类型 | 触发条件 | 适用场景 | 核心作用 |
|---|---|---|---|
| hover | 鼠标指针悬停在元素上 | 桌面端鼠标交互元素 | 提示元素可交互，提升操作感知 |
| focus | 元素获得焦点（点击、Tab键选中） | 所有可交互元素，尤其是表单元素 | 支持键盘操作，提升无障碍访问性 |
注意：不要为了视觉效果完全移除focus样式，否则使用键盘浏览网页的用户将无法感知当前选中的元素，不符合网页无障碍规范。