Estoy tratando de poner eventos de entrada / salida del mouse en elementos móviles. Hay un problema al manejar el evento de desplazamiento con CSS, así que estoy tratando de procesarlo con JS. Esto funciona bien en Chrome pero no funciona en Safari. ¿Cómo hacer que mouseenter/mouseleave funcione correctamente cuando el mouse está detenido?

CSS

 .big-box { position: relative; width: 500px; height: 100px; background: #ee9; } .hit-box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: #e99; }

HTML

 <div class="big-box"> <div class="hit-box">hit-box</div> </div>

JavaScript

 const hitbox = document.querySelector('.hit-box'); var position = 5; hitbox.style.left = 0; hitbox.addEventListener('mouseenter', function() { console.log('enter'); }); hitbox.addEventListener('mouseleave', function() { console.log('leave'); }); setInterval(function() { if(parseInt(hitbox.style.left) + position > 400) { position = -5; } else if(parseInt(hitbox.style.left) + position < 0) { position= 5; } hitbox.style.left = parseInt(hitbox.style.left) + position + 'px'; },20)