Question

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

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

任何例子？

由于

Answer 1

不幸的是，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/

Answer 2

如果您使用更复杂的标签，您可以在没有Javascript的情况下实现此目的。我用了 .parent:hover .child { -webkit-animation-play-state: paused; }它完美无缺。

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

2 个答案: