html - 在 html 元素上定位 tab 键 'highlight' 事件的正确方法是什么？

Question

我试图了解如何响应 tab 键导航，但不确定当元素通过 tab 键获得焦点时触发哪个事件。

在下面链接的代码中，我希望所有按钮在用户点击其中任何按钮时都增长到完整大小。 https://codepen.io/anon/pen/YopBaz

在示例中，我使用鼠标 ':hover' 伪类实现了效果，但我不确定如何为选项卡突出显示事件实现相同的效果。当选项卡选择集中在它的任何一个子元素上时，我已经尝试在父 div 元素上观察所有(事件/焦点/悬停)事件。这对我没有用，所以我想知道是否有一个事件可能会冒泡到用“选项卡”选择突出显示的元素的父级？

相关的CSS是:

 .speed-unit-selector .btn.active, .speed-unit-selector .btn:hover, .speed-unit-selector:active .btn,
.speed-unit-selector:hover .btn,
.speed-unit-selector:focus .btn {
  transform: scale(1, 1);
}

感谢您的任何见解!

Answer 1

tab 键导航触发元素上的 :focus 事件。您还可以使用 tabindex="value" 属性更改元素“聚焦”的顺序。

请记住，tab 键不会聚焦在不支持 :focus 事件且没有 tabindex 的元素上> 属性集。例如，如果您希望能够专注于 p 元素，请向其添加 tabindex。

见下文

button:focus {
  background: red;
}
p:focus {
  background: blue;
}

<button tabindex="1">
BUtton
</button>
<button tabindex="3">
BUtton    
</button>
<button tabindex="2">
BUtton
</button>


<p tabindex="4">
aaaaaaaaaaaaaaaaa
</p>