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

Question

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

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

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

看视频：

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

有人可以解释一下鼠标悬停行为发生了什么吗？

Answer 1

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