我想在动画图标上重复鼠标悬停功能
我想在动画图标上重复鼠标悬停功能
提问于 2019-06-04 19:50:47
我正在尝试让动画图标在悬停时每次都可以播放，而不是只有一次。但我不能让它在mouseout上工作，下面是我的代码：
<div class="shapeshifter" id='btn' style="background-image:
url(sprite_60fps.svg) "></div>
<script>
document.getElementById('btn').addEventListener('mouseover',
function() {
this.classList.add('play');
});
</script>回答 1
Stack Overflow用户
发布于 2019-06-04 20:15:09
你需要的是“用js在鼠标回车时重新启动css动画”。
在鼠标输入时调用此函数：
function reset_animation() {
var el = document.getElementById('btn');
el.style.animation = 'none';
el.offsetHeight; /* trigger reflow */
el.style.animation = null;
}确保不要在鼠标悬停时使用它，而是在鼠标输入时使用它。
(更多信息：Restart animation in CSS3: any better way than removing the element?)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56443332
复制相关文章
相似问题
腾讯云开发者
