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，一个用于hover in，另一个用于hover out：

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

JsFiddle

Answer 2

你想要的是这个Demo

#To-Top { 
  top: 0px;
  position: fixed;
  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;
  }

.rotado {
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  transform:rotate(180deg);
  -o-transform:rotate(180deg);
}

JS

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

 // fade in #back-top
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);
});

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

Answer 3

早期的webkit是什么meD xD问题解决了

#To-Top { 
-webkit-backface-visibility: hidden;
}

感谢各位的帮助：P

悬停时保持div旋转

3 个答案:

JsFiddle