Как скрыть меню при выведение курсора за элементы меню?

Question

[Alex_js]

Добрый день.
Хочу сделать выпадающие меню по наведению мыши.

Задача сделать так, что бы при наведение на span появлялось само меню.
И закрывалось обратно когда курсор мыши выходил за пределы блока div.

Вот мои потуги. Меню вроде появляется, но исчезает сразу же когда курсор выводится за span. Я же хоче сделать так, что бы оно исчезало только в момент, когда курсор будет за пределами всего блока.


let clickOnMe = document.querySelector('span');
let menu = document.querySelector('ul');
clickOnMe.onmouseover = function () {
menu.classList.remove('menu');
menu.classList.add('menuOpen');
}

let div = document.querySelector('div');
div.onmouseout = function () {
menu.classList.remove('menuOpen');
menu.classList.add('menu');
}

Ниже код HTML и CSS

HTML

<div>
     <span>Click to show menu</span>
          <ul class="menu">
			<li>Раздел 1</li>
			<li>Раздел 1</li>
			<li>Раздел 1</li>
			<li>Раздел 1</li>
		</ul>
	</div>

CSS

div {
margin: 0 auto;
width: 200px;
height: 120px;
border: 1px solid black;
}

.menu {
display: none;
}

.menuOpen {
background: gray;
}

Comments

[Евгений]

А чем обычный :hover не подходит?

[Alex]

Сделайте пример в песочнице

[Alex_js]

Alex, спасибо, но уже предложили решения)

[Alex_js]

Евгений, подходит полностью, просто хочется через JS)

[Евгений]

Alex_js, js всегда дает большую нагрузку, чем css, и везде, где возможно - нужно использовать стилизацию через css

Answer 1

[Tranceinheart]

Самый простой вариант - поместить ul.menu внутрь самого span.

.menu {
display: none;
}
span:hover .menu{
display:block;
}

В этом случае использовать JS скрипт не придется вообще

Если вы хотите оставить все как есть

let clickOnMe = document.querySelector('span');
let menu = document.querySelector('ul');
clickOnMe.onmouseover = function () {
menu.classList.remove('menu');
menu.classList.add('menuOpen');
}

let div = document.querySelector('div');
div.addEventListener("mouseout", function(e){
  if(e.target == div){
      menu.classList.remove('menuOpen');
      menu.classList.add('menu');
    }
}, false)