CSS伪类选择器:hover和:focus是前端开发中实现交互反馈的常用工具，前者响应鼠标悬停行为，后者响应元素获得焦点的状态，合理运用这两个选择器可以大幅提升页面的用户体验。
:hover和:focus的基础定义
:hover是当用户鼠标指针悬停在元素上方时触发的伪类，适用于绝大多数可见的HTML元素，最常见的是按钮、链接、卡片等可交互组件。:focus则是当元素获得焦点时触发，通常通过键盘Tab键切换、点击输入框等场景触发，多用于表单元素、可聚焦的交互组件。
两者的基础使用语法非常相似，都是直接在选择器后追加伪类名称，示例如下：
/* :hover基础示例 */
.button:hover {
background-color: #409eff;
color: #ffffff;
}
/* :focus基础示例 */
.input:focus {
border-color: #409eff;
outline: none;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
常见组件的应用技巧
按钮组件的交互优化
按钮是页面中最常用的交互组件，通常会同时搭配:hover和:focus实现完整的交互反馈。鼠标悬停时改变背景色和阴影，获得焦点时给出明确的焦点状态，方便键盘操作用户识别当前聚焦的按钮。
.btn {
padding: 8px 16px;
border: 1px solid #dcdfe6;
border-radius: 4px;
background-color: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
}
/* 鼠标悬停效果 */
.btn:hover {
background-color: #ecf5ff;
border-color: #b3d8ff;
}
/* 焦点状态效果 */
.btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
}
/* 同时处于悬停和焦点状态时的样式 */
.btn:hover:focus {
background-color: #d9ecff;
}
表单输入框的提示优化
表单输入框通常只需要使用:focus伪类，当输入框获得焦点时高亮边框，同时可以搭配相邻兄弟选择器，在输入框获得焦点时显示对应的提示文本。
.form-input {
width: 240px;
height: 36px;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
outline: none;
transition: border-color 0.2s ease;
}
/* 输入框获得焦点时的样式 */
.form-input:focus {
border-color: #409eff;
}
/* 输入框获得焦点时，显示相邻的提示文本 */
.form-input:focus + .input-tip {
color: #409eff;
opacity: 1;
}
.input-tip {
font-size: 12px;
color: #909399;
opacity: 0;
transition: opacity 0.2s ease;
margin-top: 4px;
}
导航菜单的交互实现
导航菜单的列表项通常使用:hover实现悬停高亮，同时如果是可点击的导航项，也需要添加:focus状态，保证键盘操作的可用性。
.nav-item {
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.nav-item:hover {
background-color: #f5f7fa;
}
.nav-item:focus {
background-color: #ecf5ff;
outline: none;
}
使用注意事项
- 移动端设备没有鼠标操作，:hover伪类在移动端的表现不稳定，建议仅对鼠标操作场景使用:hover，移动端交互优先通过点击事件实现。
- 不要随意移除:focus的默认outline样式，除非你提供了其他足够明显的焦点反馈，否则会影响键盘操作用户的使用体验。
- 如果元素本身不可聚焦（比如普通的<div>标签），需要先设置tabindex属性才能触发:focus状态，例如<div tabindex="0">可聚焦div</div>。
- 使用:hover时建议搭配transition属性实现平滑的过渡效果，避免样式突变导致用户视觉不适。
常见问题解答
为什么:hover在触摸设备上不生效
触摸设备没有鼠标指针悬停的操作逻辑，当用户点击元素时，部分浏览器会短暂触发:hover状态，但松开后状态会立即消失，因此不建议将核心交互逻辑依赖:hover实现，触摸设备优先使用点击相关的交互方案。
:focus和:active有什么区别
:focus是元素获得焦点时触发，状态会持续保持直到焦点转移到其他元素；:active是元素被激活（比如鼠标按下未松开）时触发，松开后状态就会消失，两者的触发时机和持续时长都有明显区别。
合理搭配:hover和:focus伪类，既能满足鼠标用户的交互习惯，也能保障键盘用户的操作体验，是提升页面无障碍性的重要手段。