CSS焦点与悬停效果实用技巧

直接写 :focus 样式，结果完全不生效。

• 确保元素原生可聚焦，或显式设置 tabindex="0"
• 避免对 tabindex="-1" 元素依赖 :focus 视觉反馈——它只能通过 JS .focus() 触发，无法用 Tab 键进入
• 移动端 Safari 对 :focus 支持较弱，常需配合 ontouchstart 或 role="button" 补充逻辑

hover与focus共存时的样式覆盖逻辑

CSS 选择器权重相同的情况下，后声明的规则会覆盖先声明的。但更关键的是：用户同时满足 hover 和 focus（比如鼠标悬停后点击输入框），此时两个伪类都为真，浏览器会按层叠顺序应用样式。

例如下面这段代码中，input:focus 的边框颜色最终是红色，不是蓝色：

input:hover {
  border-color: blue;
}
input:focus {
  border-color: red;
}

• 若想让 focus 样式「强制优先」，可提升选择器权重，如写成 input:focus:hover 或 input:focus 放在 input:hover 后面
• 注意 :focus-visible 是更现代的替代方案，它只在键盘操作触发 focus 时生效，能避免鼠标悬停时意外激活 focus 样式
• 不要依赖 :hover:focus 来做「仅鼠标悬停且聚焦」的效果——多数浏览器不支持该组合（focus 状态在鼠标点击后才建立，hover 已结束）

去除默认焦点轮廓（outline）的安全替代方案

很多人直接写 *:focus { outline: none; } 来“美化”焦点样式，但这会破坏可访问性——键盘用户将彻底失去焦点位置提示。

• 必须提供等效视觉反馈：用 box-shadow、border 或背景色变化替代 outline
• 推荐用 :focus-visible 有选择地移除 outline：

  button:focus {
    outline: none;
  }
  button:focus-visible {
    outline: 2px solid #007bff;
  }

• Chrome / Firefox 默认 outline 偏细且对比度低，建议至少设为 outline: 2px solid 并确保色值满足 WCAG AA 对比度要求

移动端 touch 设备下的 hover/focus 行为差异

iOS 和 Android 浏览器对 :hover 支持有限：通常只在第一次触摸后临时激活一次，之后失效；:focus 在软键盘弹出时才稳定触发。

• 不要把核心交互反馈（如按钮按下态）只依赖 :hover，务必补充 :active 或 JS 类控制
• 在 iOS 上， 缺失会导致 :hover 完全不工作
• 某些安卓 WebView 会把点击事件延迟 300ms 并模拟 hover，导致视觉反馈滞后——可用 touch-action: manipulation 缓解

:focus 样式是否生效，第一要看元素能不能被聚焦；hover 和 focus 不是互斥状态，它们的样式叠加规则取决于 CSS 声明顺序和选择器权重；而任何移除 outline 的操作，都必须同步提供同等可感知的焦点指示。

到这里，我们也就讲完了《CSS焦点与悬停效果实用技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！