html - CSS - 防止：动画期间悬停？

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

你可以阅读这篇文章