CSS - prevent :hover during animation?(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);
你可以阅读这篇文章
这篇关于CSS - 防止:动画期间悬停?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:CSS - 防止:动画期间悬停?
基础教程推荐
- 响应更改 div 大小保持纵横比 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 动态更新多个选择框 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 我什么时候应该在导入时使用方括号 2022-01-01