: hover与:focus分别用于鼠标悬停和元素聚焦的样式控制，常结合使用以提升交互一致性和可访问性；通过同时定义:hover、:focus及:hover:focus，可实现按钮、链接等元素在不同交互状态下的平滑视觉反馈，并建议保留或替换清晰的焦点轮廓以保障键盘导航体验。
在CSS中，:hover 和 :focus 是两个常用的伪类，用于实现用户交互时的视觉反馈。它们可以单独使用，也可以结合使用来创建更自然、可访问性更强的切换效果。
1. :hover 与 :focus 的基本作用
:hover 在鼠标指针悬浮在元素上时触发样式变化，适合用于按钮、链接等需要即时反馈的场景。
:focus 在元素获得焦点时生效，比如通过 Tab 键导航或点击输入框。它对键盘可访问性和用户体验至关重要。
例如：
button:hover {
background-color: #0056b3;
}
button:focus {
outline: 2px solid #0077cc;
}
2. 同时使用 :hover 和 :focus 实现平滑切换
为了让视觉效果更连贯，可以将两者组合使用。这样无论用户是用鼠标悬停还是通过键盘聚焦，都能看到一致的反馈。
立即学习“前端免费学习笔记（深入）”；
示例：当按钮同时被悬停和聚焦时，增强背景色：
button:hover,
button:focus {
background-color: #0056b3;
outline: none; /* 可自定义轮廓，但不建议完全移除 */
}
button:hover:focus {
background-color: #004494; / 两者同时触发时更深的颜色 /
}
注意：:hover:focus 表示元素**同时满足悬停和聚焦状态**，可用于精细化控制交互体验。
3. 提升可访问性的建议
- 不要完全去除
:focus的默认轮廓（如 outline: none），除非你提供足够明显的替代样式，否则会影响键盘用户的使用。 - 确保 :focus 样式在视觉上清晰可见，比如使用高对比度边框或阴影。
- 对于按钮和链接，保持 :hover 和 :focus 效果逻辑一致，避免混淆用户。
改进示例：
button:focus {
outline: 2px solid #0077cc;
outline-offset: 2px;
box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.3);
}
4. 常见应用场景
- 导航菜单项：悬停变色，聚焦时也显示相同高亮，提升可用性。
- 表单输入框：聚焦时边框变蓝，悬停时轻微变色，两者结合更直观。
- 可点击卡片：添加 hover 放大或阴影，focus 时保留同样效果，支持键盘操作。
基本上就这些。合理搭配 :hover 与 :focus，能让界面既美观又具备良好的交互逻辑和可访问性。
