css伪类选择器:hover和:focus应用技巧-css教程-PHP中文网

css伪类选择器:hover和:focus应用技巧

P粉602998670

发布： 2025-09-25 15:51:01

原创

422人浏览过

:hover用于鼠标悬停时触发样式，如按钮变色、下拉菜单显示；:focus在元素获得焦点时生效，常用于输入框高亮和键盘导航，提升可访问性。两者可组合使用，统一交互反馈，但需注意移动端hover无效、focus不可省略，并遵循LVHFF顺序以确保样式正确应用。

css伪类选择器:hover和:focus应用技巧

在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 样式以保障无障碍浏览。• 按钮焦点反馈：确保所有可点击元素都能通过键盘导航识别。

错误做法：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

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）。

基本上就这些，掌握好这两个伪类，能让你的页面更有“呼吸感”，也更友好。不复杂但容易忽略细节。

以上就是css 伪类选择器:hover和:focus应用技巧的详细内容，更多请关注php中文网其它相关文章！