使用javascript mouseover事件调用CSS3悬停效果

Question

如何通过JavaScript mouseover事件而不是CSS mouseover :hover事件来唤起CSS3动画？

$(.panel').on('mouseover', function{ 
                                      //foo 
                                   });  

这是 CSS鼠标悬停时动画的示例

Answer 1

最好的解决方案是更改css，以便它使用其他类而不是:hover ：

.animation.active {
    background:transparent;
}
.animation.active span {
    -webkit-transform:rotate(52.5deg);
    -moz-transform:rotate(52.5deg);
    rotation:52.5deg;
    -webkit-transform:translate(1em, 0);
    -moz-transform:translate(1em, 0);
    translate(1em, 0);
}

然后您可以通过jQuery切换类：

$('button.toggle').on('click', function() {
  $('a.animation').toggleClass('active');
});

JSFiddle上的演示

Answer 2

如果我理解正确，则只需手动更改该对象的CSS：

$('button').on('click', function{
 $('.animation:hover span').css('webkit-transform:rotate(52.5deg);'+
    '-moz-transform:rotate(52.5deg);'+
    'rotation:52.5deg;'+
    '-webkit-transform:translate(1em, 0);'+
    '-moz-transform:translate(1em, 0);'+
    'translate(1em, 0);');'

});