Question

：活动伪类w /按键事件。

我有一个svg按钮我画了一台我正在研究的鼓机。我使用css：active来改变他们的x：和y：when：激活'click tap'事件，他们也发出声音。我也将它们绑定到键盘上。我无法弄清楚我是否可以某种方式添加活动伪类，因此按键操作就像鼠标点击一样。

我研究过并没有找到太多东西。我所遇到的是模糊的，而不是我正在尝试的。我正在使用jquery。我确实提出了另一个解决方案，它是一个addClass绑定到一个关键帧与setTimeout，它确实得到了我想要的效果。我只是想知道是否有更有效的控制方式：主动。

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%{}
}

要查看我想要的效果，请使用向下箭头。如果这是一个无知的问题，我也应该说对不起。我是一个完全noob saibot。

Answer 1

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

实施例

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

：active pseudo-class - 使keypress行为像点击鼠标一样：active

：活动伪类w /按键事件。

1 个答案: