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

我尝试用webkit动画和@-webkit关键帧制作动画。我有一个里面有child div的div动画

当我的鼠标在孩子身上时，我会停止家长的webkit动画

有什么例子吗

---

谢谢

不幸的是，CSS中没有父选择器。您必须使用一点javascript来选择父级并告诉它暂停

CSS中的暂停声明如下所示：

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

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

javascript（本例中为jQuery）的外观如下：

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

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

请在此处观看现场演示：

---

如果使用更复杂的标签，则无需使用Javascript即可实现这一点。我曾经

---

.parent:hover.child{-webkit动画播放状态：暂停；}

并且它工作得很好。

我知道这个问题和答案有点老了，但以防万一我的想法是错误的：在CSS中，你不能这样做吗？

.child:hover{-webkit动画播放状态：暂停；

？如果不使用Javascript，这会起作用吗？不会，因为你在告诉孩子停止，而被设置动画的是家长。实际上，孩子甚至不知道它正在被设置动画。你知道，我完全错过了hover函数中的

.parent（）

调用。也许有一天祖先选择器将可用，但在此之前，我认为这是唯一的方法。