有没有一种方法可以在点击事件而不是悬停时激活转换

Question

我很难为我的问题找到一个非JS解决方案。有没有一种方法可以在点击而不是悬停时激活CSS转换？

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

还有用于单击的伪类。但它的名字有点奇怪，通常只知道它与HTML链接样式有关。

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

这里有一些很好的例子。