css3 webkit animation stop on div:hover

Question

I try to make an animation with webkit-animation and @-webkit-keyframes. I have a div animated with child div inside.

And i would stop the webkit-animation of the parent when my mouse is over a child.

Any Examples ?

Thanks

Answer 1

Unfortunately there is no parent selector in CSS, see here. You will have to use a bit of javascript to select the parent and tell it to pause.

The pause declaration in CSS goes like this:

-webkit-animation-play-state: paused | running;

The javascript (jQuery, in this case) would look something like this:

$(".child").hover(
  function(){
    $(this).parent().css("-webkit-animation-play-state", "paused");
},
  function(){
    $(this).parent().css("-webkit-animation-play-state", "running");
});

See a live demo here:

http://jsfiddle.net/UFepV/

Answer 2

If you use a more complex label you can achieve this without Javascript. I used .parent:hover .child { -webkit-animation-play-state: paused; } and it worked perfectly.