I want to repeat mouseover function on animated icon

Question

I am trying to make animated icon to be playable every time on hover instead of just once. But I cant make it work with mouseout There is my code:

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

You might want to remove the `play` class when a `mouseout` event occurs. That way the class will be added again on `mouseover` and the animation will start again. — Jamie Dixon, Jun 04 '19 at 11:54
I should place the same script, but with `mouseout`, and with what I have to change the `play`? — Валери К., Jun 04 '19 at 12:02
Yeah basically the same as you have here except using `this.classList.remove('play')` instead. — Jamie Dixon, Jun 04 '19 at 12:05
`document.getElementById('btn').addEventListener('mouseover', function() { this.classList.add('play'); }); document.getElementById('btn').addEventListener('mouseout', function() { });` — Валери К., Jun 04 '19 at 12:18
@ВалериК. - Your `mouseout` event's callback is empty. — Kévin Bibollet, Jun 04 '19 at 12:34

yaya · Answer 1 · 2019-06-04T12:42:06.100

0

what you need is "restart css animation with js on mouse enter".

call this function on mouse enter:

function reset_animation() {
  var el = document.getElementById('btn');
  el.style.animation = 'none';
  el.offsetHeight; /* trigger reflow */
  el.style.animation = null; 
}

make sure don't use it on mouseover, use it on mouseenter.

(more info: Restart animation in CSS3: any better way than removing the element?)

edited Jun 04 '19 at 12:42

answered Jun 04 '19 at 12:15

yaya

7,675
1
39
38

I want animation to play just once on hover, and when I come back on in to repeat again once. When I do the iteration it repeats nonstop until I mouseleave – Валери К. Jun 04 '19 at 12:29

I want to repeat mouseover function on animated icon

1 Answers1