旋转元素而不返回原始状态

Question

我想在div上使用悬停图片进行旋转。 但是在我想将旋转设置为默认而不旋转div回来之后。 我尝试两种方式。 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(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

和jQuery：

var rotated_elems = [".small-blue-1", ".small-blue-2", ".small-blue-3", ".small-blue-4",
    ".small-blue-5", ".big-blue-6", ".animated_blue_1", ".animated_blue_2", ".animated_blue_3"];
$.each(rotated_elems, function (key, element) {
    $(element).hover(function () {
        $(this).animate(
            {rotation: 360},
            { duration: 500,
                step: function (now, fx) {
                    $(this).css({"transform": "rotate(" + now + "deg)"});
                }
            });
    });
});

在第一种（css）情况下，元素向后旋转，在sexond（js）元素中旋转到360。 但是我想在第二个er叫声上旋转，而不能向后旋转。 有人可以帮忙吗？

Answer 1

<style>
.rotate{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
</style>
<script>
  element.addEventListener("mouseover", rotate, false);

  function rotate(){
    this.classList.add('rotate');
  }
</script>

遍历您需要的所有类，但是基本要点是使用mouseover而不是hover。

Answer 2

您必须使用mouseover而不是hover 。 我认为CSS不可能实现。