鼠标悬停时可见焦点，但仅限第一次答案

【问题标题】：Focus-visible on mouse hover, but first time only鼠标悬停时可见焦点，但仅限第一次
【发布时间】：2022-01-20 23:44:17
【问题描述】：

我对 CSS 伪类 :focus-visible 的启发式行为感到困惑。

在我们的应用程序中，我们在某些地方有下拉菜单。我注意到，当我刷新页面时，:focus:focus-visible 会在鼠标悬停时应用于新打开的下拉列表（其项目）。

但是一旦我基本上点击了应用程序中的任何按钮，例如只是重新打开下拉菜单，焦点可见伪将不再适用。

观看视频：

我目前已将轮廓颜色更改为更微妙，因为这对我来说确实是一种意外行为，但我不想在用户使用键盘导航时丢失轮廓。

谁能解释一下鼠标悬停行为发生了什么？

【问题讨论】：

【解决方案1】：

每当您单击一个元素时，浏览器都会使用内部启发式方法来确定它们是否应显示默认焦点指示器。这就是为什么在 Chrome 中切换到 a 会显示一个焦点环，但用鼠标单击它却不会。实际上 :focus-visible 适用于键盘而不是鼠标。阅读这篇文章以获得更多说明。 Link

【讨论】：