css - css3 webkit 动画在 div:hover 上停止

Question

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

当我的鼠标悬停在孩子上时，我会停止父母的 webkit 动画。

任何例子？

谢谢

Answer 1

不幸的是，CSS 中没有父选择器，请参见此处。您将不得不使用一些 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/

Answer 2

如果您使用更复杂的标签，则无需 Javascript 即可实现。我用过 .parent:hover .child { -webkit-animation-play-state: paused; }，效果很好。