JSFiddle - React, Tailwind, and code Playground

by Alexey Ukolov

HTML

<div id="target">
  <div id="counter"></div>
</div>

CSS

#target {
  display: flex;
  width: 100px;
  height: 100px;
  background: green;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

#counter {
  color: #fff;
  font-size: 32px;
}

JavaScript

const targetElement = document.querySelector('#target');
const counterElement = document.querySelector('#counter');

let isHovering = false;
let intervalId = null;
let counter = 0;

targetElement.addEventListener('mouseenter', () => {
  isHovering = true;

  intervalId = setInterval(() => {
    if (!isHovering) {
      clearInterval(intervalId);
      return;
    }

    counterElement.innerText = ++counter;
  }, 16)
});

targetElement.addEventListener('mouseleave', () => {
  isHovering = false;

  if (intervalId) {
    clearInterval(intervalId);
  }
});