当前位置：文江博客话题详情

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

发布于 2024-11-18 01:34:51 字数 142 浏览 2 评论 0原文

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

当我的鼠标位于孩子上方时，我会停止父母的 webkit 动画。

有例子吗？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

黎歌 2024-11-25 01:34:51

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

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.

The pause declaration in CSS goes like this:

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

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");
});

See a live demo here:

http://jsfiddle.net/UFepV/

回复收藏 0 原文