8

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

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Geraud Mathe
  • 711
  • 2
  • 9
  • 20

2 Answers2

22

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/

Community
  • 1
  • 1
methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • I know this question and answer are a bit old, but just in case my thinking is wrong: couldn't you do, in the CSS, `.child:hover{ -webkit-animation-play-state: paused; }`? Would that work without having to resort to Javascript? – Scott R Oct 08 '11 at 22:03
  • No, because you're telling the child to stop, while what is being animated is the parent. The child in essence doesn't even "know" it's being animated. – methodofaction Oct 08 '11 at 22:41
  • You know, I totally missed the `.parent()` call in the hover function. Maybe one day ancestor selectors will become available, but until then I imagine this is the only way. – Scott R Oct 12 '11 at 04:13
8

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.

praseodym
  • 2,134
  • 15
  • 29
Quintin Wright
  • 81
  • 1
  • 1