有没有办法激活点击事件的过渡而不是悬停？

Question

我正在努力为我的问题找到一个非JS解决方案。有没有办法在点击时激活CSS转换而不是on：hover或其他？

Answer 1

一种可能性：您可以添加一个包含点击转换的类。这是一个使用jQuery的示例 - 您也可以使用“原始”JavaScript以编程方式实现此目的：

应设置动画的HTML容器

<div id="transtion"></div>

<强>的JavaScript

// bind click event to the element itself - but it can also be any other element that triggers this …
$('#transition').click(function() {
    // add the classname thats defined with the transition in your CSS
    $(this).addClass('translate_left');
});

Answer 2

点击也有pseudoclass。但它有一些奇怪的名称，通常只知道它与HTML链接样式有关。

DIV.button:active {
   border-style: inset;
}

Here is some nice example.