css3 webkit 动画在 div:hover 上停止答案

【问题标题】：css3 webkit animation stop on div:hovercss3 webkit 动画在 div:hover 上停止
【发布时间】：2011-09-27 05:10:07
【问题描述】：

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

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

有什么例子吗？

谢谢

【问题讨论】：

标签： css webkit css-transitions

【解决方案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/

【讨论】：

我知道这个问题和答案有点老了，但以防我的想法是错误的：你不能在 CSS 中 .child:hover{ -webkit-animation-play-state: paused; } 吗？无需求助于 Javascript 是否可行？
不，因为您是在告诉孩子停止，而正在动画的是父母。本质上，孩子甚至不“知道”它正在被动画化。
你知道，我完全错过了悬停功能中的.parent() 调用。也许有一天祖先选择器会变得可用，但在那之前我想这是唯一的方法。

【解决方案2】：

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

【讨论】：