Onclick 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让它成为onclick

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

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

这是我的小提琴http://jsfiddle.net/sneakmiggz/7B8Ya/

Answer 1

演示

• .hover在你的CSS中使用.你正在.hover从你的JS 中添加类,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');
});