Call CSS3 hover effects with javascript mouseover event

Question

How can I evoke CSS3 anmation through a javascript mouseover event rather than CSS mouseover :hover event?

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

Here is an example of animation on CSS mouseover

Answer 1

The best solution is to change the css so that it uses an additional class instead of :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);
}

and then you can toggle the class via jQuery:

$('button.toggle').on('click', function() {
  $('a.animation').toggleClass('active');
});

Demo on JSFiddle

Answer 2

If I got you right, you should simply change CSS of that object manually:

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

});