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

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

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

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

пример

Javascript

1
2
3

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

HTML5

<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

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

var timer;
$('nav li').mousemove(function() {
  clearTimeout(timer);
  var ts = $(this);
  timer = setTimeout(function(){
      ts.addClass('hover')
        .siblings()
        .removeClass('hover');
  },500);
});

	20.03.2017, 09:48