Javascript-форум - mouseenter event Кнопка каталога

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - mouseenter event Кнопка каталога (https://javascript.ru/forum/misc/73869-mouseenter-event-knopka-kataloga.html)

mouseenter event Кнопка каталога

Доброго времени суток.
Встала проблема, которую не могу сообразить как решить.
Есть тег div.nav_catalog
При наведении на него на другой не вложенный в него тег div.catalog_list должен вешаться класс .catalog_list__hover.
Таким образом, у меня всплывает меню категорий товаров.

Я это реализовал:

$(document).ready(function() {
	$('.nav_catalog').mouseenter(function(){
		$('.catalog_list').addClass('catalog_list__hover');
	});
});

Встал вопрос как скрыть каталог при уходе мыши.
При уходе мыши с кнопки Каталог div.nav_catalog
>>Если Мышь переведена на div.catalog_list
---Каталог не скрывать
>>Если мышь не над div.catalog_list
---Каталог скрыть

Я пытался вкурить как это проверить, но у меня происходит какая-то фигня, например он у меня либо никак не реагирует, либо реагирует как раз наоборот
Я не могу понять как проверить навелся ли курсор на div.catalog_list
П

$('.nav_catalog').mouseleave(function(){
		// $('.catalog_list').mouseenter(function(e){
		// 	if(!e){
		// 		$('.catalog_list').removeClass('catalog_list__hover');
		// 	}
		// });
	});

Так не работает?

$(document).ready(function() {
    let timer = 0;
    const $list = $('.catalog_list');
    $('.nav_catalog').add($list).mouseenter(function() {
        clearTimeout(timer);
        $list.addClass('catalog_list__hover');
    }).mouseleave(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            $list.removeClass('catalog_list__hover');
        }, 130);
    });
});

Сейчас посмотрю.

Цитата:

Сообщение от Nexus (Сообщение 485935)

Так не работает?

$(document).ready(function() {
    let timer = 0;
    const $list = $('.catalog_list');
    $('.nav_catalog').add($list).mouseenter(function() {
        clearTimeout(timer);
        $list.addClass('catalog_list__hover');
    }).mouseleave(function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            $list.removeClass('catalog_list__hover');
        }, 130);
    });
});

При попытке перевести курсор на на catalog_list. он скрывается, а я от этого хочу уйти.
Верста такова, что catalog_list не дочерний элемент nav_catalog
Иначе бы я решил этот вопрос на css =)

<div class="col-2 nav_item nav_catalog">
	<a href="#">
		<i class="fas fa-bars"></i>
		<span>Каталог</span>
		<i class="fas fa-angle-down"></i>
	</a>
</div>
<div class="row catalog_list">
	<div class="col-2 catalog_item">
		<a href="#">
			<img src="img/cat_item1.jpg" alt="Мебель">
			<span class="title">Мебель для детского сада</span>
		</a>
	</div>
	<div class="col-2 catalog_item">
		<a href="#">
			<img src="img/cat_item1.jpg" alt="Мебель">
			<span class="title">Мебель для детского сада</span>
		</a>
	</div>
	<div class="col-2 catalog_item">
		<a href="#">
			<img src="img/cat_item1.jpg" alt="Мебель">
			<span class="title">Мебель для детского сада</span>
		</a>
	</div>
	<div class="col-2 catalog_item">
		<a href="#">
			<img src="img/cat_item1.jpg" alt="Мебель">
			<span class="title">Мебель для детского сада</span>
		</a>
	</div>
</div>

Такой вариант работает)
Спасибо большое)

Таймеры выставили, получается?
А то сначала вариант был без них, и я не сразу заметил разницу.

oleg13321, да, я изменял код, прошу прощения, что не предупредил.
Думал вы не видели изначальный вариант.