Есть меню. И есть отдельный блок в HTML разметке стоит после самого меню.
Задача такая при наведении на пункт Показать каталог - открывается блок с каталогом. Как только мышку убираем с пункта Показать каталог - сам каталог скрывается.
- этот момент сделал, тут вопросов нет. При наведении навешиваем класс и дальше CSS.
Проблема с другим, когда каталог появляется - при перемещении мышки в область этого каталога - он скрывается. Хотя по скрипту вроде как не должен скрываться.
Нужно чтобы при открытии каталога - можно было мышкой по нему перемещаться и переходить по ссылкам.
<ul class="menu">
<li class="show_catalog">Показать каталог</li>
<li>Пункт2</li>
<li>Пункт3</li>
<li>Пункт4</li>
<li>Пункт5</li>
</ul>
<div id="subcatalog">
тут сам каталог....
</div>
<script type="text/javascript">
$('.show_catalog').on('mouseover', function() {
$("#subcatalog").addClass("hovered");
});
$(document).on('mouseover', function(e) {
if (!$('.show_catalog').is(e.target) && !$('#subcatalog').is(e.target)) { // если наводим не на .show_catalog и не на .menudop
$("#subcatalog").removeClass("hovered"); // скрываем блок
}
});
</script>