Пауза при переходе к подпунктам в меню

@alexscus · Регистрация: 16.01.2017

Студворк — интернет-сервис помощи студентам

Как сделать задержку при переходе к вложенным блокам

пример

JavaScript
1
2
3
$('nav li').hover(function() {
  $(this).addClass('hover').siblings().removeClass('hover');
});

HTML5
1
2
3
4
5
6
7
8
<nav><ul>
        <li>text<span>1 info<br>1.1 test<br>1.2 test</span></li>
        <li>text<span>2 text text</span></li>
        <li>text<span>3 text text</span></li>
        <li>text<span>4 text </span></li>
        <li>text<span>5 text text text text</span></li>
        <li>text<span>6 text text</span></li>
</ul></nav>

CSS
1
2
3
4
5
6
nav {background: #ccc;color: #666;font-size: 14px;height: 56px;text-transform: uppercase;position: relative;text-align: justify;margin: 0 0 60px;}
nav ul {list-style: none;margin: 0;padding: 0 20px;line-height: 56px;}
nav li {display: inline-block;}
nav ul:after {display: inline-block;width: 100%;content: '';}
nav .hover span {display:block;}
nav span {display:none; position:absolute; left:0; top:56px; width:100%; background:#999; color:#fff; padding:0 10px; box-sizing:border-box;}

Добавлено через 1 минуту
При выборе пункта в правой части экрана и перемещении курсора к пунктам подменю по кратчайшей траектории выбирается другой пункт меню.

@Уф · 20.03.2017, 09:48

может так https://jsfiddle.net/w8ke5pzw/1/ ?

JavaScript
1
2
3
4
5
6
7
8
9
10
var timer;
$('nav li').mousemove(function() {
  clearTimeout(timer);
  var ts = $(this);
  timer = setTimeout(function(){
      ts.addClass('hover')
        .siblings()
        .removeClass('hover');
  },500);
});

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .