Как сделать выпадающий блок div с помощью JS?

Question

По нажатию на кнопку должен появляется блок. Я могу через onclick поменять св-во стиля "display:none -> display:block" у <div> но нужно чтобы блок "пропал" если мышка не находится на нём (на выпадающем блоке).

Answer 1

let wrapper = document.querySelector('.wrapper');
let button = document.querySelector('.button');
let hint = document.querySelector('.hint');

button.addEventListener('click', function(event) {//При клике на кнопку
  hint.classList.add('show'); //Покажем блок
});

wrapper.addEventListener('mouseleave', function(event) { //При уводе курсора мыши с родительского блока
  hint.classList.remove('show'); //Скрываем блок
});

* {
  box-sizing: border-box;
}

.wrapper {
  width: 200px;
  background-color: orange;
  padding: 20px;
}

.button {
  display: block;
  width: 100%;
  height: 30px;
  color: #fff;
  background-color: green;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
}

.hint {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -300px;
  height: 300px;
  transition: all ease 0.4s;
  opacity: 0;
  visibility: hidden;
  border: 1px solid #000;
  border-radius: 10px;
  background-color: yellow;
}

.show {
  visibility: visible;
  opacity: 1;
  top: 20px;
}

<div class="wrapper">
  <button class="button">Кнопка</button>
  <div class="hint">"пытается выпадать"</div>
</div>

P.S. Если бы мы прослушивали событие mouseleave на "выпадающем" блоке, то при нажатии на кнопку он бы появлялся и в ту же секунду исчезал, так как курсор мыши был бы не на нём, а на кнопке. Именно для предотвращения такого поведения, мы создали родителя-обёртку для блока и кнопки, который и прослушиваем на необходимое нам mouseleave

БЛОГ НА HUSL

Как сделать выпадающий блок div с помощью JS?

Ответы (1 шт):