Question

我有<div>播放动画。我想阻止div:hover在动画播放时对<div>生效。

例如：

<div></div>

div:before {
    content: "A";
    -webkit-animation: A 5s;
    -moz-animation:    A 5s;
    animation:         A 5s;
}

@-webkit-keyframes A {
     100% { font-size: 5em; }
}

@-moz-keyframes A {
     100% { font-size: 5em; }
}

@keyframes A {
    100% { font-size: 5em; }
}

div:hover:before { 
    content: "B";
}

http://jsfiddle.net/hh54D/

在此示例中，动画会增加字母“A”的大小。但是如果你将动画悬停，div:hover会将其更改为字母“B”。我想阻止这种情况发生 - 换句话说，如果悬停它仍然应该仍然是字母“A”，直到动画结束。应该如何在CSS中完成？

Answer 1

如果您不介意，可以使用Jquery执行此操作。转型：

$("#YourDivID").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){change div content to B});

对于动画：

$("#YourDivID").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){change div content});

你也可以使用纯粹的js：

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

您可以阅读this post

CSS - 阻止：在动画期间悬停？

1 个答案: