我想用webkit-animation和@-webkit-keyframes做一个动画。我有一个div,里面有一个子div。
当我的鼠标悬停在子元素上时,我想停止父元素的webkit-animation。
有没有示例?
谢谢
我想用webkit-animation和@-webkit-keyframes做一个动画。我有一个div,里面有一个子div。
当我的鼠标悬停在子元素上时,我想停止父元素的webkit-animation。
有没有示例?
谢谢
很遗憾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");
});
点击下面链接可以查看实时演示:
.parent:hover .child { -webkit-animation-play-state: paused; }
,效果非常好。
.child:hover{ -webkit-animation-play-state: paused; }
?这样做是否可以避免使用Javascript? - Scott R.parent()
调用。也许总有一天会出现祖先选择器,但在那之前,我想这是唯一的方法。 - Scott R