CSS - 防止:动画期间悬停?

2022-01-22 00:00:00 animation hover html css

我有一个播放动画的 <div>.我想防止 div:hover 在动画仍在播放时对该 <div> 生效.

I have a <div> that plays an animation. I want to prevent div:hover from taking effect on that <div> while the animation is still playing.

例如:

<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 中应该如何实现?

In this example, the animation increases the size of the letter "A". But if you hover the animation, div:hover changes it to letter "B". I would like to stop this from happening - in other words, if hovered it should still remain the letter "A" until the animation is finished. How should this be done in CSS?

推荐答案

如果你不介意的话，你可以用 Jquery 来做.过渡:

You can do this with Jquery if you don't mind. For transition:

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

对于动画:

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

你也可以只使用纯js:

You can also just use pure js:

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

你可以阅读这篇文章

相关文章