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

【问题标题】：CSS - prevent :hover during animation?CSS - 防止：动画期间悬停？
【发布时间】：2013-10-22 18:10:23
【问题描述】：

我有一个播放动画的<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 中应该如何实现？

【问题讨论】：

你可以使用preventdefault
preventDefault 将取消 JS 事件而不是阻止 CSS 伪类样式规则。

标签： html css animation hover

【解决方案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

【讨论】：