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

Question

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

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

Here is an example 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');
});

Demo on JSFiddle