如何在键盘“输入”按下时触发 :active 伪类？ （仅使用 CSS）

Question

CSS：

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

意图：

1. 键盘用户标签到链接，使用:focus样式作为视觉提示

2. 他们按enter键激活链接； :active样式提供视觉按键反馈

问题：

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

Answer 1

好问题！

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

很久以前，MSIE 将:active像:focus一样对待，因此有一种方法可以通过超链接来实现这一点（这是在千兆互联网速度之前，并且当浏览器没有很好地显示正在进行的加载时，除了一个愚蠢的挥舞旗帜什么的）。

运行以下代码段以查看实际行为：

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

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

 :active { color: Red; }

 <input type='text' id='t1' value='Set focus and hit tab'/> <a href='javascript:;' onclick='console.log("Hyperlink")'>Hyperlink</a> <input type='button' value='Button' onclick='console.log("Button")'/>

因此，您为此不得不使用 JavaScript 或 Flash/Silverlight 等插件。

Answer 2

:focus 将是键盘用户切换到该元素时进入的状态。 请注意，制表符将循环浏览页面上的链接标签，因此必须使用选择器 a:focus 应用任何 css 样式。

:active 将是用户点击键盘上的输入按钮时进入的状态。

下面是一个关于如何为键盘和鼠标用户应用 css 的示例的小片段：

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

Answer 3

您绝对可以使用:focus来使用键盘，但是 active 会有点困难。

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

但是:active有点不同。 它被应用在用户单击鼠标按钮和释放它之间的时间线中。 使用键盘很难实现这一点。 因为没有按住回车键。 用户按下回车按钮的那一刻，链接将打开。 在这里你可以看到:active是如何工作的例子。 W3School Active欲了解更多信息MDN :active

如果您打算将伪类用于链接，那么我建议使用:focus ，它可以同时处理鼠标和 Tab 键。