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

Question

我最近一直在研究简单的 CSS 转换和悬停事件等。我注意到当你按下 TAB 键时，它通常会找到很好的链接，但是......

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

这是因为我有一个充满正方形的页面，这些正方形DIVs看起来类似于：

当您用鼠标将鼠标悬停在此块上时，它会通过悬停事件更改颜色，主要是为了直观地通知用户该元素以某种方式具有交互性。

有没有办法可以用 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>