CSS伪类:hover和:focus的区别_交互状态样式设置指南

:hover 在鼠标悬停时触发，适用于提示可交互元素；:focus 在键盘聚焦时生效，对无障碍访问至关重要；两者设备支持不同，应结合使用并确保可访问性。

在网页设计中，CSS伪类 :hover 和 :focus 都用于为元素添加交互状态的样式，但它们触发的条件和使用场景有明显区别。理解这些差异有助于提升用户体验和可访问性。

触发方式不同：鼠标悬停 vs 键盘聚焦

:hover 在用户将鼠标指针移动到元素上方时被激活，不需要点击或输入操作。它主要用于提示用户某个元素是可交互的，比如按钮变色、下拉菜单展开等。

:focus 则在元素获得焦点时生效，通常发生在用户通过 Tab 键切换到链接、按钮或表单控件时，也可通过 JavaScript 的 focus() 方法触发。这个状态对键盘导航和屏幕阅读器用户至关重要。

例如：

• 点击输入框时，边框高亮 —— 这是 :focus 的典型应用
• 鼠标移到导航菜单项上显示子菜单 —— 这依赖于 :hover

设备兼容性差异：并非所有设备都支持:hover

触摸屏设备（如手机和平板）对 :hover 的支持有限。很多移动浏览器会忽略或模拟该效果，可能导致样式意外触发或完全无效。因此不能仅靠 :hover 提供关键信息。

而 :focus 在支持键盘操作的设备上表现更一致，尤其在无障碍访问中不可或缺。确保表单元素和交互控件拥有清晰的:focus样式，能显著提升可用性。

视觉反馈与用户体验优化建议

合理使用这两个伪类可以增强界面响应感：

• 为按钮同时设置 :hover 和 :focus 样式，保证鼠标和键盘用户都有反馈
• 避免仅用颜色变化传达状态，应结合边框、阴影或图标微调
• 移除默认 outline 时，务必自定义 :focus-visible 样式，防止破坏可访问性

基本上就这些。掌握 :hover 和 :focus 的核心区别，不仅能做出更美观的交互效果，还能让网站对更多用户友好。