javascript - Oclick Javascript 函数不工作

Question

我有一张我想旋转的图片，

<img src="images/anchor.png" alt="robot image" class="robot rotate" width="100px" height="100px" />

下面的css代码用来旋转图片

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;
}  

.rotate:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
} 

最后是 jquery 让它在点击时发生

$(document).ready(function () {
    $('img.rotate').click(function () {
        $('img.rotate').addClass('hover');
    }, function () {
        $('img.rotate').removeClass('hover');
    });
    alert("working?");
});

但是当我点击图像时，所有发生的事情都是我的图像由于我的 css 而旋转。我想要发生的是当图像被点击时它会开始旋转，而不是当我将鼠标悬停在它上面时。

这是我的 fiddle http://jsfiddle.net/sneakmiggz/7B8Ya/

Answer 1

Demo

• 在您的 CSS 中使用 .hover。你正在从你的 JS 添加类 .hover，css :hover 不会为它工作。
• 尽可能使用$(this)。
• 使用 .toggleClass() 添加/删除类。

---

CSS:

.rotate.hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
} 

---

JS:

$('img.rotate').click(function () {
    $(this).toggleClass('hover');
});