Как сделать так, чтобы при наведении на блок появлялся список и не исчезал, пока не уберешь со списка курсор?

Question

[julith]

При наведении на блок .dropbtn открывается div #others, который содержит список. Но листать его не получается, так как действие функции распространяется только на .dropbtn. Как распространить действие mouseover на открытый список? чтобы он скрывался, когда с него, а не с .dropbtn убираешь мышь.

<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
    
    button = document.querySelector(".dropbtn");
    button.addEventListener("mouseover", _dropmenu, false); 
    button.addEventListener("mouseout", _dropmenu, false); 

    function _dropmenu(){
        dropDown = document.querySelector("#others");
        dropDown.classList.toggle("hidden");   
    }

    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn') && !event.target.matches('#others')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('hidden')) {
                    openDropdown.classList.remove('hidden');
                }
            }
        }
    }    
});
</script>

<div class="good-image newElem dropdown-content hidden" id="others">
		<ul>
			<li>......</li>
		</ul>
</div>

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    position: absolute;
    z-index: 1;
}
div#others {
    overflow-y: scroll;
}
.hidden {
    visibility: hidden;
}

Comments

[ForSureN1]

Вы же сами добавили обработчик mouseout, который срабатывает когда мышь уходит за пределы кнопки

button.addEventListener("mouseout", _dropmenu, false);

Answer 1

[ksnk]

Вообще-то удобнее для отвечающего и быстрее для спрашивающего смастерить пример, например на codepen.io . Например так

В отличии от кода в вопросе используются методы mouseenter, mouseleave как более подходящие к месту и toggle заменен на явную установку-выкидывание класса.

Answer 2

[julith]

В моем случае сработало это

document.addEventListener("DOMContentLoaded", function(event) { 
    
    button = document.querySelector(".dropbtn");
    button.addEventListener("mouseenter", ()=> {_dropmenu('remove')}, false); 
    dropDown = document.querySelector("#others");
    dropDown.addEventListener("mouseleave", ()=> {_dropmenu('add')}, false); 

    function _dropmenu(par){
        dropDown.classList[par]("hidden");   
    }

    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn') && !event.target.matches('#others')) {
            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('hidden')) {
                    openDropdown.classList.remove('hidden');
                }
            }
        }
    }    
});