Как скрыть меню или какое-то окошко на JS через определенное время, после того как мышка уйдет с этой области.
Следующий код работает, но это черновой вариант. Некогда было тестировать переделку.
var button = component.querySelector('.button'),
menu = component.querySelector('.menu'),
timerId;
list.addEventListener('mouseleave', function() {
timerId = setTimeout(function () {
menu.classList.add('hidden');
}, 3000); // 1 sec = 1000
list.addEventListener('mouseenter', function () {
clearTimeout(timerId);
});
});
menu = component.querySelector('.menu'),
timerId;
list.addEventListener('mouseleave', function() {
timerId = setTimeout(function () {
menu.classList.add('hidden');
}, 3000); // 1 sec = 1000
list.addEventListener('mouseenter', function () {
clearTimeout(timerId);
});
});
Вместо добавления класса:
menu.classList.add('hidden');
Можно добавлять свойство css
menu.style.display = 'none';
Код можно улучшить, если:
— вынести добавление menu.addEvent за событие mouseleave.
— добавить проверку на timeId перед тем как очищать таймер (clearTimeout).
