Поворот элемента без возврата в исходное состояние

Question

Я хочу сделать rotaion на моем div с изображением на hover. Но после того, как я хочу установить поворот по умолчанию, не поворачивая 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. А на втором парить ничего не происходит. Но я хочу повернуть на второй пасе, без обратного вращения. Может ли кто-нибудь помочь?

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> 

проведите все необходимые классы, но основной точкой является использование мыши вместо наведения.

Answer 2

Вы должны использовать mouseover вместо hover. Я не думаю, что это возможно в CSS.