<style>
#cont {
display: flex;
}
.slider__wrapper__item {
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: green;
}
.slider__wrapper__item.active {
background-color: red;
}
</style>
<body>
<div id='cont'>
<div class='slider__wrapper__item'></div>
<div class='slider__wrapper__item'></div>
<div class='slider__wrapper__item'></div>
<div class='slider__wrapper__item'></div>
<div class='slider__wrapper__item'></div>
</div>
<script>
document.querySelectorAll('.slider__wrapper__item')
.forEach (div => div.addEventListener('mouseover', function (ev) {
const timer = setTimeout( () => {
this.classList.add('active');
}, 500);
this.addEventListener('mouseout', ()=> {
clearTimeout(timer);
this.classList.remove('active')
}, {once:true});
})
);
</script>
</body>