如何在键盘“输入”按下时触发 :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 将是键盘用户切换到该元素时输入的状态。请注意，制表符将循环浏览页面上的链接标签，因此任何 css 样式都必须使用选择器 a:focus 应用。

:active 将是用户按下键盘上的 Enter 按钮时进入的状态。

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

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

Answer 3

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

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

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

如果你打算使用链接的伪类，那么我建议使用:focus，它可以同时使用鼠标和tab键。