CSS3 Webkit动画在div:hover时停止

Question

我想用webkit-animation和@-webkit-keyframes做一个动画。我有一个div，里面有一个子div。

当我的鼠标悬停在子元素上时，我想停止父元素的webkit-animation。

有没有示例？

谢谢

- Geraud Mathe

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/

- methodofaction

---

我知道这个问题和答案有点老了，但是以防万一我的想法错了：在CSS中，你不能这样做吗？.child:hover{ -webkit-animation-play-state: paused; }？这样做是否可以避免使用Javascript？ - Scott R

不行，因为你让孩子停止，而正在被动画的是父级元素。实质上，孩子甚至不知道自己正在被动画。 - methodofaction

你知道吗，我在hover函数中完全忘记了.parent()调用。也许总有一天会出现祖先选择器，但在那之前，我想这是唯一的方法。 - Scott R

Answer 2

如果您使用更复杂的标签，就可以在不使用JavaScript的情况下实现此效果。 我使用了.parent:hover .child { -webkit-animation-play-state: paused; }，效果非常好。

- Quintin Wright