:hover:focus 是交集伪类，仅当元素同时处于悬停和聚焦状态时生效，适用于需精确控制交互样式的场景，如渐进式提示或无障碍视觉反馈。
直接用 :hover:focus 组合伪类就行
不需要 JavaScript，纯 CSS 就能同时响应鼠标悬停和键盘聚焦——只要把两个伪类连写，浏览器会匹配「既处于 hover 状态又处于 focus 状态」的元素。注意：不是「任一满足」，而是「两者同时成立」。
-
:hover:focus是交集（AND），不是并集（OR）；想实现「hover 或 focus 任一触发」得用逗号分隔：:hover, :focus - 常见于可点击又支持键盘操作的交互控件，比如自定义
<button>、带tabindex的<div>或链接 - 部分元素（如原生
<button>）在点击后可能瞬间失去:hover（鼠标抬起），但若保持焦点，:hover:focus就不会生效——这是预期行为，不是 bug
什么时候该用 :hover:focus 而不是分开写
当你需要「仅在用户正悬停且该元素拥有焦点时」才启用某套样式，比如高亮边框+阴影+文字加粗，避免 hover 和 focus 样式互相干扰或叠加过重。
- 表单中「悬停时显示帮助图标，获得焦点时才真正展开提示」这类渐进式交互
- 无障碍设计中，为键盘用户模拟“悬停即聚焦”的视觉反馈（需配合
:focus-visible更精准） - 防止移动设备误触：iOS Safari 在触摸后会短暂触发
:hover，但通常不触发:focus，所以:hover:focus在移动端几乎不会生效，天然更安全
:hover:focus 在不同元素上的表现差异
并非所有元素默认支持 :focus，也并非所有浏览器对 :hover 的触发逻辑一致。组合伪类生效的前提是两个状态都能被真实触发。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
<a href="#">和<button>默认可聚焦，:hover:focus可靠 -
<div>必须显式加tabindex="0"才能获得焦点，否则:hover:focus永远不匹配 - Firefox 对
:hover的“悬停”定义较严格（需鼠标真正停留），而 Chrome 有时会在快速划过时短暂触发，导致:hover:focus一闪而过 - 如果用了
outline: none且没提供替代焦点样式，:focus状态虽存在，但用户不可见——组合伪类仍生效，只是你看不到变化
button:hover:focus {
background-color: #0056b3;
color: white;
box-shadow: 0 0 8px rgba(0, 92, 179, 0.4);
transform: translateY(-1px);
}
容易被忽略的兼容性与调试点
:hover:focus 本身兼容性极好（IE9+、所有现代浏览器都支持），但实际效果常因其他因素失效，排查时优先看这些：
立即学习“前端免费学习笔记（深入）”；
- 检查元素是否真的获得了焦点：按
Tab键，看是否有默认outline出现；没有的话，说明:focus根本没触发 - 确认没有更高优先级的选择器覆盖了
:hover:focus样式（比如单独写的:focus规则权重更高） - 不要在
:hover:focus中依赖transition做复杂动画——某些浏览器在状态快速切换时会跳过过渡 - 如果用在 SVG 元素上，确保父容器或自身设置了
tabindex，且 SVG 嵌入方式支持焦点（如内联 SVG，而非<img>）
