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

Question

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

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

这是CSS mouseover 上的动画示例

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

});