Почему при попытке наведения мыши на другой пункт меню окно пропадает?

241

06 августа 2018, 08:50

При наведении на кнопку создается меню и убирается через 7 секунд, если с меню не воздействуют, но, как только на меню навели мышью, таймер очищается т соответственно окно надо убрать, когда пользователь перестает воздействовать с ним, проблема в том, что когда пытаешься направить мышь на другой пункт меню, само меню пропадает. Я думал, что это возможно из-за всплытия, отменил, не помогло. В чем проблема?

var gear = document.querySelector('.settings__icon--3'); 
gear.addEventListener('mouseover', function() { 
	var menu = document.querySelector('.settings__hidden-menu'); 
	menu.style.display = 'block'; 
	var timeClose = setTimeout(function() { 
		menu.style.display = 'none'; 
	}, 7000); 
	menu.addEventListener('mouseover', function() { 
		clearTimeout(timeClose); 
	}); 
  menu.addEventListener('mouseout', function(event) { 
		menu.style.display = 'none'; 
    event.stopPropagation(); 
	}); 
})

.settings__icon--3 { 
  width: 30px; 
  height: 30px; 
  background-color: red; 
  margin: 40px; 
} 
 
.settings__hidden-menu { 
  width: 200px; 
  height: 400px; 
  background-color: red; 
  display: none; 
}

<div class="settings__icon--3"> 
   
</div> 
 
<div class="settings__hidden-menu"> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
  <li>text</li> 
</div>

Answer 1

Дело не во всплытие а в поведении обработчиков mouseover и mouseout.
Смысл в том что mouseout вызывается всякий раз когда вы наводите курсор на любой другой элемент, даже внутри контейнера.
Решение - используйте вместо mouseover и mouseout, mouseenter и mouseleave соответственно.