javascript - JavaScript マウスオーバー イベントで CSS3 ホバー効果を呼び出す

Question

CSSマウスオーバーイベントではなくJavaScriptマウスオーバーイベントを介してCSS3アニメーションを呼び出すにはどうすればよい:hoverですか?

$(.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);');'

});