css3 webkit animation on div：hover [英] css3 webkit animation stop on div:hover

问题描述

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

I try to make an animation with webkit-animation and @-webkit-keyframes. I have a div animated with child div inside.

当我的鼠标在一个孩子的时候，我会停止webkit动画的父。

And i would stop the webkit-animation of the parent when my mouse is over a child.

任何示例？

感谢

推荐答案

很遗憾，CSS中没有父级选择器，请参阅此处。

Unfortunately there is no parent selector in CSS, see here. You will have to use a bit of javascript to select the parent and tell it to pause.

CSS中的暂停声明如下：

The pause declaration in CSS goes like this:

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

javascript（jQuery，在这种情况下）看起来像这样：

The javascript (jQuery, in this case) would look something like this:

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

查看现场演示：

http://jsfiddle.net/UFepV/

这篇关于css3 webkit animation on div：hover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！