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

Call CSS3 hover effects with javascript mouseover event

本文关键字：悬停 CSS3 调用 javascript mouseover 事件 使用      更新时间：2023-09-26

如何通过javascript鼠标悬停事件而不是CSS鼠标悬停:hover事件来调用CSS3动画?

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

下面是一个CSS鼠标悬停在

上的动画示例

最好的解决方案是更改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演示

如果我猜对了，你应该简单地手动更改该对象的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);');'
});
相关文章：