为什么使用键盘聚焦 html 元素与使用鼠标聚焦不同？

Question

我试图根据元素的焦点（通过按住鼠标单击它，或者使用 Tab 键选择它）来设置元素的样式，但根据我使用的方法，我有不同的行为。

这是我的 CSS 代码：

.v-expansion-panel-header:focus {
    outline: 2px solid;
    outline-color: blue;
    background-color: white;
}

我的元素：

这是我使用 Tab 键聚焦时的样子：

当我按住鼠标点击它时：

如何解释这种行为？

Answer 1

当使用 Tab 键聚焦元素时，:focus 伪类通常会被激活。但是，当您用鼠标单击某个元素时，:focus 状态可能不会被激活，特别是对于默认情况下不交互式的元素。

为了避免这种情况，您可以使用 :focus 进行键盘聚焦，使用 :focus-within 进行键盘和鼠标聚焦。这确保了当关注元素/它的任何后代时应用样式。您还可以使用 JS 事件侦听器来检测键盘和鼠标焦点，然后使用事件处理程序来处理样式。这给了你更多的控制权。

对于 CSS 解决方案，您可以使用如下内容：

.v-expansion-panel-header:focus,
.v-expansion-panel-header:focus-within {
    outline: 2px solid blue;
    background-color: white;
}

（我已经为您整理了大纲属性！）