Форум

Volonter · #1 (**permalink**) 27.06.2023, 08:27

Все привет! Делаю простенький функционал, в ряд расположены 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-й этот самый третий элемент не раскрывался бы.
Заранее благодарю за любой совет!

voraa · #2 (**permalink**) 27.06.2023, 09:33

<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>

рони · #3 (**permalink**) 27.06.2023, 10:12

Volonter,

https://javascript.ru/forum/showthread.php?p=236002

Volonter · #4 (**permalink**) 27.06.2023, 11:57

voraa,
Спасибо! То, что нужно!

Форум

Справочник

Discord чат

Курсы javascript