Показать сообщение отдельно
  #1 (permalink)  
Старый 27.11.2020, 08:57
Новичок на форуме
Отправить личное сообщение для greenzlat Посмотреть профиль Найти все сообщения от greenzlat
 
Регистрация: 05.05.2017
Сообщений: 4

Открытие блока при наведении на кнопку
Есть меню. И есть отдельный блок в 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>
Ответить с цитированием