css3 webkit动画停止在div上：悬停

我尝试使用 webkit-animation 和 @-webkit-keyframes 制作动画。我有一个 div 动画，里面有子 div。

当我的鼠标位于孩子上方时，我会停止父母的 webkit 动画。

有例子吗？

Thanks

不幸的是CSS中没有父选择器，see here。您将必须使用一些 JavaScript 来选择父项并告诉它暂停。

CSS 中的暂停声明如下：

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

javascript（在本例中为 jQuery）看起来像这样：

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

在这里查看现场演示：

http://jsfiddle.net/UFepV/