CSS :focus-visible仅首次鼠标悬停触发后续点击失效问题咨询

核心判定规则 #

:focus-visible 是浏览器基于用户近期交互输入类型做的动态启发式匹配，不是固定绑定某类输入设备，和你遇到的场景相关的核心判定逻辑：

• 页面初始加载完成、还未捕获到任何用户交互时，浏览器对用户当前使用的输入源处于未知判定状态。这个阶段只要元素通过脚本逻辑（例如下拉组件打开时自动将焦点迁移到第一个选项/下拉面板）获得焦点，浏览器会默认匹配:focus-visible，优先保证焦点标识可见，避免键盘用户进入页面后找不到焦点位置。
• 当浏览器捕获到第一次明确的指针类交互（鼠标点击、触屏点击等）后，会将当前交互上下文标记为「指针输入模式」。该模式下，所有由鼠标点击、鼠标悬停联动触发的焦点迁移，都不会匹配:focus-visible；只有后续监听到Tab、方向键等键盘导航操作触发焦点移动时，才会重新为获焦元素匹配:focus-visible。

现象成因 #

你观察到的「刷新后首次开下拉悬停触发:focus-visible，点击过按钮后再操作就不触发」完全符合上述规则：

1. 首次打开下拉时，页面还没有捕获到任何鼠标点击操作，浏览器处于输入源未知态，下拉组件打开时自动把焦点移到了选项元素上，直接触发了:focus-visible匹配，你看到的悬停生效本质是焦点已经落在选项上，不是悬停本身触发的伪类。
2. 当你点击过页面内任意按钮后，浏览器已经确认你当前使用鼠标操作，进入指针输入模式。后续再打开下拉时，哪怕组件依旧自动把焦点移到选项上，因为当前是指针交互上下文，就不会再匹配:focus-visible。

适配建议 #

如果要兼顾避免鼠标场景的多余轮廓、又不丢失键盘导航的焦点提示，不需要全局移除:focus-visible样式：

• 你当前把轮廓色调整为柔和样式的处理是兼容方案之一，不会影响键盘用户的焦点识别。
• 如果要彻底消除首次加载的误触发，可以给页面绑定一次性的pointerdown监听，捕获到第一次指针交互后给根节点加标记类，针对该标记类下下拉组件的自动焦点迁移场景做样式微调即可，不要覆盖键盘操作触发的:focus-visible样式。
• 也可以优化下拉组件的焦点逻辑：如果下拉是通过鼠标点击触发打开，打开阶段不自动迁移焦点到选项，等用户按下方向键时再移动焦点，从根源避免初始态的误匹配。

内容的提问来源于stack exchange，提问作者josias