javascript - 辅助功能 - 在 TAB 键按下时触发悬停和焦点事件

Question

最近我一直在涉足简单的 CSS 过渡和悬停事件等。我注意到，当您按 TAB 键时，它通常会找到很好的链接，但是...

如果我有一个悬停事件，比如显示一段文本或类似的东西，我如何确保按下 TAB 键会触发悬停和/或焦点事件？

这是因为我有一个充满正方形的页面，这些正方形由 DIV 组成，看起来类似于:

当您将鼠标悬停在这个 block 上时，它会通过悬停事件改变颜色，本质上是为了直观地通知用户该元素以某种方式交互。

有没有一种方法可以使用 TAB 键甚至箭头键触发悬停事件？我的理由是，如果出于某种原因您没有鼠标或触摸设备，您可能会错过内容。

稍微修改我的问题

因此 TAB 键被视为 :focus 事件，并且当您为链接提供 :hover 状态时效果很好，但 TAB 键是否有可能确认DIV 元素？

Answer 1

对于 CSS，您还可以使用 :focus，试试这个:

div {
  float:left;
  margin:2px;
}
a {
  display:block;
  height:100px;
  width:100px;
  line-height:100px;
  text-align:center;
  background:purple;
  color:white;
  transition:.3s linear;
}
a:hover, a:focus {
  background:orange;
}      

<div><a href="">item1</a></div>
<div><a href="">item2</a></div>
<div><a href="">item3</a></div>
<div><a href="">item4</a></div>
<div><a href="">item5</a></div>