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

Question

如何通过javascript鼠标悬停事件而非CSS鼠标悬停:hover事件唤起CSS3动画？

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

CSS鼠标悬停

Here is an example动画

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');
});

Demo on 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);');'

});