css选择器中:hover与:focus的交互效果实现

:hover 和 :focus 需显式组合（如:hover:focus）才能同时生效，否则样式互不影响；单独使用无法实现叠加态效果，且需注意优先级、可访问性及移动端兼容性。

hover 和 focus 同时触发时样式不生效？

常见现象是：鼠标悬停时 :hover 样式正常，但用键盘 Tab 进入焦点后 :focus 样式没反应，或者两者叠加时样式被覆盖。根本原因是 CSS 优先级和伪类匹配逻辑——:hover 和 :focus 是独立条件，浏览器不会自动合并它们的样式规则，必须显式写成组合选择器才能生效。

• 单独写 a:hover { color: red; } 和 a:focus { outline: 2px solid blue; }，两者互不影响，但无法实现“悬停+聚焦”共存效果
• 想让按钮在鼠标悬停且获得焦点时显示特殊边框，必须写成 button:hover:focus { border-color: purple; }
• 注意顺序：如果 :focus 规则在后且样式相同，会覆盖 :hover；但组合选择器 :hover:focus 优先级更高，能确保叠加态生效

如何让键盘用户也获得 hover 级别的视觉反馈？

仅依赖 :hover 会让键盘操作者（如屏幕阅读器用户、Tab 导航者）缺失关键状态提示。WCAG 要求焦点可见性，而单纯加 :focus 又常显得突兀或与悬停风格不一致。稳妥做法是统一视觉语言，用组合伪类覆盖默认行为。

• 避免只写 a:focus { outline: none; } —— 这会直接抹掉焦点指示，违反可访问性
• 推荐方案：

  button:hover,
  button:focus,
  button:hover:focus {
    background-color: #007bff;
    color: white;
  }

  这样保证鼠标悬停、键盘聚焦、以及两者同时发生（比如用鼠标点击前已聚焦）都呈现一致高亮
• 若需区分状态（如悬停变色、聚焦加边框），可分层定义：button:hover 控制颜色，button:focus 控制 outline，button:hover:focus 再微调（例如移除 outline 防重叠）

focus-visible 是不是可以替代 focus？

:focus-visible 是现代浏览器中更精准的焦点检测方式，它只在用户**明确通过键盘触发焦点**时匹配，避免鼠标点击后意外激活 :focus 样式。但它不能完全替代 :focus，尤其在旧浏览器兼容或需要强制视觉反馈的场景。

WPS灵犀

WPS灵犀是WPS推出的一款AI智能办公和学习助手

下载

• Chrome/Firefox/Edge 支持良好，Safari 15.4+ 开始支持；不支持时需回退到 :focus
• 典型用法：

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

  这样鼠标点击不显示 outline，键盘 Tab 才显示
• ⚠️ 注意：:focus-visible 和 :hover 组合（button:hover:focus-visible）目前兼容性较差，部分浏览器不识别，生产环境慎用

移动端 touch 设备上的 hover 失效问题

大多数移动浏览器（iOS Safari、Android Chrome）默认不触发 :hover，除非用户点击元素（模拟一次“悬停”），且后续可能缓存该状态。这意味着纯 :hover 样式在手机上基本不可靠，而 :focus 在触摸屏上也只对可聚焦元素（如 input、带 tabindex 的 div）有效。

立即学习“前端免费学习笔记（深入）”；

• 不要依赖 button:hover 实现核心交互反馈，改用 :active 响应触摸按下态：

  button:active {
    transform: scale(0.98);
  }

• 若需悬停感，可结合 JavaScript 监听 touchstart 添加临时 class，再用 CSS 控制：.btn--touched:hover 不适用，但 .btn.touched 可以
• 安卓 Chrome 中开启 hover 支持需设置 @media (hover: hover) 媒体查询做条件加载，但实际意义有限，建议优先考虑触控友好设计