CSS动画点击

Question

使用常规的JS (而不是JQuery)，我尝试让一些图片在点击后摇动，但它不起作用。

HTML:

    <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"...

JS:

    function wrongAnswer(){ 
        document.getElementById("s1_imgB").style.className = "shake";

CSS:

    .shake:hover {....

默认情况下，我可以使用以下html获得要抖动的元素。但是，我想让CSS动画启动后，图像被点击。

HTML:

    <img id='s1_imgB' class="fragment shake"....

当页面加载时，鼠标悬停影响应该是不活动的，然后单击图像后，鼠标悬停会导致图像抖动。

我做错了什么？谢谢

Answer 1

我觉得应该是

document.getElementById("s1_imgB").className += " shake";

Answer 2

我觉得应该是这样的：

function wrongAnswer(){ 
document.getElementById("s1_imgB").className = "shake";

无(.style )

Answer 3

您应该删除css中的:hover标识符，因为它只能在单击图像之后应用这些样式，然后移动鼠标以触发悬停。当你每次在图像上移动时，你也会得到震动。使用JS添加类(没有悬停)应该应用抖动样式。

您可能还需要追加握手类，此时您正在用握手替换片段。但还不清楚你是否需要根据你提供的信息去做这件事。

document.getElementById("s1_imgB").className += " shake";