辅助功能 - 在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键被视为一个：焦点事件，当你给链接a：悬停状态但 TAB键可以确认DIV元素时，效果很好吗？

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

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

tabindex不 为0.它可以是负数，0或遵循这些规则的可能整数：

来自MDN on tabindex

  

  
• 负值表示该元素应该是可聚焦的，但不应通过顺序键盘导航到达;
  
• 0表示该元素应该可通过顺序键盘导航进行可聚焦和可达，但其相对顺序由...定义   平台惯例;
  
• 正值意味着可以通过顺序键盘导航进行聚焦和可达;它的相对顺序由   属性值：顺序跟随增加的数量   tabindex。如果几个元素共享相同的tabindex，则它们的   相对顺序遵循它们在文档中的相对位置。