如何触发：键盘上的有效伪类’输入’按？ （仅使用CSS）

CSS：

a:focus { opacity: .75 } a:active { transform: translateY(4px) } 

意图：

1. 键盘用户选项卡链接，使用:focus样式作为视觉提示

2. 他们点击enter以激活链接; :active style提供可视按键反馈

问题：

:active样式可以在鼠标单击时正确触发，但不能触发按键。 我可以用CSS解决这个问题吗？

Answer 1

好问题！

是的，你不能再这样做了。

很久以前MSIE对待:active如:focus因此有一种方法可以通过超链接来实现这一点（这是在千兆互联网速度之前以及当浏览器没有很好地显示正在进行中的加载时除了哑巴挥动国旗或东西）。

运行以下代码段以查看操作中的行为：

• input type='button'可以使用ENTER或SPACE激活
• 按住某个按钮上的SPACE将显示:active样式（FireFox除外;这看起来像FF错误，因为它适用于mousedown）
• 每次键盘发送角色时，按住按钮上的ENTER将反复触发onclick 。
• 只有在仍然聚焦于按钮的情况下释放SPACE键时，按住某个按钮上的SPACE才会触发onclick 。 （例如，您可以通过以下方式模拟鼠标单击：选项卡到按钮，按住空格，然后再次单击选项卡并释放它以取消单击。）
• 只能使用ENTER激活超链接。
• 单击超链接将显示:active样式，使用ENTER （或触摸）不会。

 document.getElementById('t1').focus(); // set focus for easier demo 

 :active { color: Red; } 

  Hyperlink  

Answer 2

：focus将是键盘用户选中该元素时输入的状态。 请注意，Tab键会循环显示页面上的链接标记，因此必须使用选择器a：focus应用任何CSS样式。

：active将是用户按下键盘上的enter按钮时输入的状态。

这里有一个如何为键盘和鼠标用户应用css的示例片段：

 a:hover .class, a:focus .class { background-color: rgba(243,113,89, 0.95); } 

Answer 3

你绝对可以:focus于使用键盘，但是活跃会有点困难。

:focus当元素获得焦点时应用焦点。 例如，当用户通过鼠标单击输入字段或通过选项卡选择该输入字段时。 这是一个展示焦点如何工作的例子; 标签和鼠标都有。 W3School焦点了解更多信息MDN：重点关注

但是:active有点不同。 它会在用户单击鼠标按钮并释放它之间的时间轴中应用。 使用键盘很难实现。 因为输入键没有按住。 当用户按下回车键时，链接将打开。 在这里，您可以看到有关如何:active的示例。 W3School Active更多信息MDN：活跃

如果你打算将伪类用于链接，那么我建议使用:focus ，它将为鼠标和制表键提供技巧。