I'm trying to put mouse enter/mouse-leave events on moving elements. There is a problem in handling the hover event with CSS, so I'm trying to process it with JS. This works fine in chrome but not working in safari. How to make mouseenter/mouseleave work properly when the mouse is stopped?

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)