Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 27.11.2020, 09:19
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,018

Когда вы водите мышью по блоку каталога, то попадаете на другие элементы, и они уже являются e.target. Т.е надо делать проверку на то, что блок каталога не является их родительским.

Вообще не понятно, зачем изобретать всякие самопальные интерфейсы. Сейчас уже большинство трафика в интернете идет с мобильных устройств с сенсорными экранами. Как человеку с сенсорным экраном работать с вашим меню? Да и есть полезное требование к интерфейсу, что бы им можно было пользоваться с клавиатуры. И как?
Ответить с цитированием
  #3 (permalink)  
Старый 30.11.2020, 06:19
Новичок на форуме
Отправить личное сообщение для greenzlat Посмотреть профиль Найти все сообщения от greenzlat
 
Регистрация: 05.05.2017
Сообщений: 4

Сообщение от voraa Посмотреть сообщение
Как человеку с сенсорным экраном работать с вашим меню? Да и есть полезное требование к интерфейсу, что бы им можно было пользоваться с клавиатуры. И как?
Мобильное меню - это отдельная песня, оно реализовано отдельно. Необходимо в силу дизайна сделать то, что я описал выше.
Ответить с цитированием
  #4 (permalink)  
Старый 30.11.2020, 07:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,912

greenzlat,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hovered{
      border: 2px solid red;
  }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function(){
let timer;
$('.show_catalog, #subcatalog').on('mouseenter mouseleave', ({type}) => {
    if (type == 'mouseenter') {
        clearTimeout(timer);
        $("#subcatalog").addClass("hovered");
    } else timer = setTimeout(() => $("#subcatalog").removeClass("hovered"), 300)
  });
});
  </script>
</head>

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


</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Jquery Скрыть/Показать блок при наведении tot_kotoryi Ваши сайты и скрипты 1 08.02.2016 23:15
Событие onmouseout при наведении мышки на дочерний элемент фонарик Общие вопросы Javascript 2 26.01.2016 14:01
Как реализовать вывод блока при наведении на ссылку Toga Элементы интерфейса 1 15.09.2013 19:31
Появление ссылки при наведении мыши nikolaymac jQuery 1 05.09.2013 15:32
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 24.05.2008 00:55