When you hover over a button, a menu is created and removed after 7 seconds if the menu is not affected, but as soon as the menu is hovered with the mouse, the timer is cleared and the window must be removed, when the user stops working with it, the problem is that when you try to send Mouse on another menu item, the menu itself disappears. I thought it was possible because of the ascent, canceled, did not help. What is the problem?

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>

    1 answer 1

    The point is not the ascent but the behavior of the mouseover and mouseout .
    The mouseout is that a mouseout is called whenever you hover over any other element, even inside the container.
    Solution - use mouseover and mouseout , mouseenter and mouseleave respectively, mouseleave .