如何触发：键盘上的有效伪类'输入'按？ （仅使用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键被释放且仍然专注于按钮时，按住onclick按钮才会触发SPACE。 （例如，您可以通过以下方式模拟鼠标单击：选项卡到按钮，按住空格，然后再次单击选项卡并释放它以取消单击。）
• 只能使用ENTER激活超链接。
• 点击超链接会显示:active样式，使用ENTER（或触摸）则不会。

＆＃13;

＆＃13;

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

＆＃13;

:active
{
   color: Red;
}             

＆＃13;

<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")'/>

＆＃13;

＆＃13;

＆＃13;

因此，您不得不使用JavaScript或Flash / Silverlight这样的插件。

Answer 2

你绝对可以让:focus使用键盘，但是有效则会有点困难。

当该元素获得焦点时，将应用

:focus。例如，当用户通过鼠标单击输入字段或通过选项卡选择输入字段时。这是一个展示焦点如何工作的例子;使用制表符和鼠标。 W3School Focus了解更多信息MDN :focus

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

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