辅助功能 - 在 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>                  

Answer 2

这是关于您的最后一条评论：

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

我相信您正在寻找tabindex="0"。添加该属性将使您的元素能够接收焦点。

所以<div tabindex="0">Hello World</div>

tabindex 不有为 0。它可以是负数、0 或正整数，遵循以下规则：

来自MDN on tabindex

• 负值表示该元素应该是可聚焦的，但不能通过顺序键盘导航访问；
• 0 表示该元素应该可以通过顺序键盘导航获得焦点和访问，但其相对顺序由下式定义 平台约定；
• 正值表示应该可以通过顺序键盘导航获得焦点和访问；它的相对顺序由 属性值：顺序跟随增加的数量 选项卡索引。如果几个元素共享同一个 tabindex，它们的 相对顺序遵循它们在文档中的相对位置。