:hover用于鼠标悬停时触发样式，如按钮变色、下拉菜单显示；:focus在元素获得焦点时生效，常用于输入框高亮和键盘导航，提升可访问性。两者可组合使用，统一交互反馈，但需注意移动端hover无效、focus不可省略，并遵循LVHFF顺序以确保样式正确应用。
在CSS中，:hover 和 :focus 是两个非常实用的伪类选择器，常用于提升网页交互体验。它们分别对应用户“鼠标悬停”和“获得焦点”的状态，合理使用能让界面更直观、易用。
1. :hover 的常见应用场景
:hover 适用于用户将鼠标指针移动到元素上时触发样式变化，适合用于增强视觉反馈。
• 按钮变色：当用户悬停在按钮上时，改变背景色或文字颜色，提示可点击。• 下拉菜单显示：配合子菜单容器使用 display 或 opacity 控制展开与隐藏。• 图片放大或加阴影：提升图集或卡片类组件的交互感。• 链接下划线出现：鼠标移上时才显示下划线，保持页面简洁。示例：
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
2. :focus 的正确使用方式
:focus 表示元素获得焦点，通常由键盘操作（如 Tab 键）触发，对可访问性（Accessibility）至关重要。
立即学习“前端免费学习笔记（深入）”；
• 输入框高亮：表单输入时通过边框变色或阴影提示当前操作位置。• 移除默认 outline 的替代方案：避免直接取消 outline，应自定义 focus 样式以保障无障碍浏览。• 按钮焦点反馈：确保所有可点击元素都能通过键盘导航识别。错误做法：
input:focus {
outline: none; /* 屏蔽轮廓可能影响残障用户 */
}
推荐做法：
input:focus {
outline: 2px solid #007cba;
outline-offset: 2px;
}
3. :hover 与 :focus 的组合技巧
某些场景下，可以同时使用两者，实现一致的交互反馈。
• 可点击元素（如按钮、链接、自定义控件）同时支持鼠标和键盘操作时，统一 hover 和 focus 样式。• 使用 :hover:focus 匹配既悬停又聚焦的元素，精细控制交互状态。示例：让按钮在悬停或聚焦时都出现阴影
button:hover,
button:focus {
box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
outline: none; /* 注意：仅在提供足够视觉反馈时才隐藏 */
}
4. 注意事项与最佳实践
• 移动端无 hover 效果：触摸屏设备不支持真正的悬停，部分浏览器模拟效果有限，不要依赖 :hover 实现关键功能。• focus 样式不可省略：保证键盘导航可用，符合 WCAG 无障碍标准。• 避免样式跳跃：添加 transition 平滑过渡，提升用户体验。• 顺序建议：在 CSS 中将 :focus 放在 :hover 后，避免被覆盖（遵循 LVHFF 顺序：:link, :visited, :hover, :focus, :focus-visible）。基本上就这些，掌握好这两个伪类，能让你的页面更有“呼吸感”，也更友好。不复杂但容易忽略细节。
