如何触发:键盘上的有效伪类'输入'按？(仅使用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 bug,因为它适用于mousedown)
• 每次键盘发送角色时,按住ENTER按钮将反复触发onclick.
• 只有SPACE在按下按钮时释放按键时,按住按钮才会触发.(例如,您可以通过以下方式模拟鼠标单击:选项卡到按钮,按住空格,然后再次单击选项卡并释放它以取消单击.)onclickSPACE
• 超链接只能激活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这样的插件.