javascript - :active pseudo-class - making a keypress act like a mouse click with respect to :active

Question

:带有按键事件的事件伪类。

<小时/>

我有为我正在开发的鼓机绘制的 svg 按钮。我使用 css :active 来更改它们的 x: 和 y: 当 :active 带有“click tap”事件时，它们也会播放声音。我也将它们绑定(bind)到键盘。我不知道是否可以以某种方式添加事件伪类，因此按键的行为就像鼠标单击一样。

<小时/>

我进行了研究，但没有发现太多。我所遇到的内容很模糊，并不完全是我正在尝试的。我正在使用jquery。我确实提出了另一个解决方案，它是一个与关键帧绑定(bind)的 addClass 和 setTimeout ，它确实达到了我想要的效果。我只是想知道是否有更有效的方法来控制:active。

<小时/>

My Codepen

<小时/>

我想简单地添加事件而不是为 20 个按钮执行单独的动画。我的代码有效，似乎它们是一种更简单的方法，我想知道它。

<小时/>

$(document).keydown(function(e) {
switch(e.which) {
    case 40:bass.play();
            screen.text("bass drum");
            $("#btnright").addClass("test");
            setTimeout(function()                                                       
  {$("#btnright").removeClass("test");},200);
    break;

    case 32 :snare.play();
            screen.text("snare drum"); 
    break;

    case 39: high

还有一些 CSS

<小时/>

    #btnright:active{
  x:-304;
  y:-468;
}
.test{
  animation: test .2s linear; 
}
@keyframes test{
  0%{}
  50%{x:-304; y:-468;}
  100%{}
}

<小时/>

要查看我想要的效果，请使用向下箭头。如果这是一个无知的问题，我也应该说抱歉。我是一个十足的菜鸟 saibot。

Answer 1

无法使用 JavaScript 修改伪类，因此您需要切换事件类。

示例

JS

var $btn = $('#btn')
$(document)
.keydown(event => {
    $btn.addClass('active')
})
.keyup(event => {
    $btn.removeClass('active')
})

CSS

#btn:active,
#btn.active {
 ...
}

<强> Codepen Demo

资源:

• Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery