jquery - 悬停时保持 div 旋转

Question

我有这个 html 代码:

<div id="To-Top"> <img src="/to-top.png" alt="Volver Arriba" /></div>

这是CSS:

#To-Top { width: 30px; height: 28px;
-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;}
.rotado{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
    -o-transform:rotate(180deg);
}

还有 jQuery:

jQuery(document).ready(function(){

// hide #back-top first
jQuery("#To-Top").hide();

// fade in #back-top
jQuery(function () {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 400) {
            jQuery('#To-Top').fadeIn();
        } else {
            jQuery('#To-Top').fadeOut();
        }
    });

    // scroll body to 0px on click
    jQuery('#To-Top img').click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});

});

    jQuery(document).ready(function(){
        jQuery("#To-Top").hover(function () {
            jQuery(this).addClass("rotado");
        }, function () {
            jQuery(this).removeClass("rotado");
        });
    });

出于某种原因，在 Firefox 和 IE 中都可以正常工作，但在 Chrome 中执行动画后，即使悬停被保持，元素也会返回到初始位置。

感谢所有的帮助。

Answer 1

toggleClass can have two parameters ，一个用于悬停，另一个用于悬停:

jQuery(document).ready(function(){
    jQuery("#To-Top").hover(function () {
        jQuery(this).addClass("rotado");
    }, function () {
        jQuery(this).removeClass("rotado");
    });
});

JsFiddle