Javascript 如何触发：键盘上的活动伪类'；输入'；按（仅使用CSS）

CSS:

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

意图：

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

键盘用户选项卡指向链接，使用

：focus

样式作为视觉提示

他们点击

enter

激活链接；

：active

样式提供可视的按键反馈

问题：

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

---

：active

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

：焦点将是键盘用户点击该元素时输入的状态。请注意，选项卡将在页面上的链接标记之间循环，因此任何css样式都必须使用选择器a:focus应用

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

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

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

---

您完全可以使用键盘操作

：focus

，但激活键盘有点困难

：焦点

在该元素接收焦点时应用。例如，当用户通过鼠标单击输入字段或通过选项卡选择该输入字段时。下面是一个例子，展示了焦点是如何工作的；两个标签和鼠标。更多信息

但是

：active

有点不同。它应用于用户单击鼠标按钮和释放鼠标按钮之间的时间线。使用键盘很难做到这一点。因为没有按下并保持回车键。用户按下enter按钮时，链接将打开。在这里，您可以看到有关

：active

工作原理的示例。更多信息

如果您打算使用伪类进行链接，那么我建议您使用

：focus

，它可以同时使用鼠标键和tab键。

问得好

是的，你不能再这样做了

很久以前，MSIE对待

：active

就像

：focus

一样，所以有一种方法可以通过超链接来实现这一点（这是在千兆互联网速度之前，浏览器除了一个愚蠢的挥动标志或其他东西外，在显示正在进行的负载方面做得不好）

运行以下代码段以查看正在运行的行为：

• input type='button'

  可以通过

  ENTER

  或

  SPACE

• 按住按钮上的

  SPACE

  将显示

  ：active

  样式（FireFox除外；这看起来像FF bug，因为它在mousedown中正常工作）
• 每次键盘发送字符时，按住按钮上的

  ENTER

  将反复触发

  onclick

• 按住按钮上的

  SPACE

  键将触发

  onclick

  ，只有当

  SPACE

  键被释放且仍聚焦在按钮上时。（例如，您可以通过以下方式模拟鼠标单击：按住空格键，然后再次按tab键并释放它以取消单击。）
• 超链接只能通过

  ENTER

  激活
• 单击超链接将显示

  ：活动的

  样式，使用

  输入

  （或触摸）将不会显示

document.getElementById（'t1'）.focus（）；//设置焦点以便于演示

：活动
{
颜色：红色；
}

您需要在试图解决此问题的地方与其他用户共享代码，以便有效地帮助您。当用户激活某个元素时，：active CSS伪类匹配。它允许页面提供浏览器已检测到激活的反馈。当与鼠标交互时，这通常是用户按下鼠标按钮和释放鼠标按钮之间的时间。：active伪类在使用键盘tab键时通常也是匹配的。请参阅@J0e3gan My bad，I edited for clarityI添加了

。按钮：focus

到

transform

css样式，似乎可以很好地使用tab。你能查一下吗？不幸的是，这不是我想要的效果。我不想在通过选项卡对焦时应用

变换

。