:hover 在鼠标悬停时触发，适用于提示可交互元素；:focus 在键盘聚焦时生效，对无障碍访问至关重要；两者设备支持不同，应结合使用并确保可访问性。
在网页设计中，CSS伪类 :hover 和 :focus 都用于为元素添加交互状态的样式，但它们触发的条件和使用场景有明显区别。理解这些差异有助于提升用户体验和可访问性。
触发方式不同：鼠标悬停 vs 键盘聚焦
:hover 在用户将鼠标指针移动到元素上方时被激活，不需要点击或输入操作。它主要用于提示用户某个元素是可交互的，比如按钮变色、下拉菜单展开等。
:focus 则在元素获得焦点时生效，通常发生在用户通过 Tab 键切换到链接、按钮或表单控件时，也可通过 JavaScript 的 focus() 方法触发。这个状态对键盘导航和屏幕阅读器用户至关重要。
例如：- 点击输入框时，边框高亮 —— 这是 :focus 的典型应用
- 鼠标移到导航菜单项上显示子菜单 —— 这依赖于 :hover
设备兼容性差异：并非所有设备都支持:hover
触摸屏设备（如手机和平板）对 :hover 的支持有限。很多移动浏览器会忽略或模拟该效果，可能导致样式意外触发或完全无效。因此不能仅靠 :hover 提供关键信息。
立即学习“前端免费学习笔记（深入）”；
而 :focus 在支持键盘操作的设备上表现更一致，尤其在无障碍访问中不可或缺。确保表单元素和交互控件拥有清晰的:focus样式，能显著提升可用性。
视觉反馈与用户体验优化建议
合理使用这两个伪类可以增强界面响应感：
- 为按钮同时设置 :hover 和 :focus 样式，保证鼠标和键盘用户都有反馈
- 避免仅用颜色变化传达状态，应结合边框、阴影或图标微调
- 移除默认 outline 时，务必自定义 :focus-visible 样式，防止破坏可访问性
