Timeout события mouseover
Все привет! Делаю простенький функционал, в ряд расположены 5 элементов, при наведении курсора на элемент он получает класс active, а у других active убираем, ну банально в общем то.
код $('.slider__wrapper__item').on('mouseover', function(){
if($(this).hasClass("active")){
$(this('.slider__wrapper__item__info')).css('display','block');
} else {
$('.slider__wrapper__item').removeClass('active animate__slideInLeft');
$(this).addClass('active animate__slideInLeft');
}
});
Вопрос в том, можно ли как то делать проверку, что если курсор юзера задержался на элементе меньше, чем на полсекунды, мы ничего не делаем? Нужно для того, что если юзер просматривает 4-й элемент, и хочет посмотреть 2-й, проскакивая через 3-й этот самый третий элемент не раскрывался бы. Заранее благодарю за любой совет! |
<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>
|
|
voraa,
Спасибо! То, что нужно! |
| Часовой пояс GMT +3, время: 11:28. |