Как сделать чтобы блок не пропадал при наведении?

Question

[MRcracker]

Есть два блока. Один скрыт и появляется при наведении на другой. Подскажите, что нужно сделать, чтобы при наведении на первый блок появлялся второй, при наведении на второй блок он не пропадал, а продолжал быть в состоянии block и скрывался только тогда, когда убираешь мышку с него или с первого блока

<div class="div1"></div>
<div class="div2"></div>

.div1 {
  width: 200px;
  height: 50px;
  background: red;
}
.div2 {
  display: none;
  width: 200px;
  height: 50px;
  background: green;
}

let div1 = document.querySelector('.div1');
let div2 = document.querySelector('.div2');

div1.addEventListener('mouseenter', e => {
  div2.style.display = 'block';
})

div1.addEventListener('mouseleave', e => {
  div2.style.display = 'none';
})

Answer 1

[0xD34F]

Вам тут не нужен js:

.div1:hover + .div2,
.div2:hover {
  display: block;
}

Конечно, если вы не наврали про взаимное расположение блоков. Можно прятать элемент по таймауту, чтобы у пользователя было время переместить курсор с одного элемента на другой:

.show {
  display: block;
}

let timeout = null;

function onEnter() {
  clearTimeout(timeout);
  div2.classList.add('show');
}

function onLeave() {
  timeout = setTimeout(() => div2.classList.remove('show'), 300);
}

div1.addEventListener('mouseenter', onEnter);
div2.addEventListener('mouseenter', onEnter);

div1.addEventListener('mouseleave', onLeave);
div2.addEventListener('mouseleave', onLeave);

Comments

[MRcracker]

блоки в разных частях сайта. Без таймаута можно как-то показать блоки?

[0xD34F]

блоки в разных частях сайта

То есть, всё-таки наврали про разметку. ЗАЧЕМ?

[MRcracker]

0xD34F, наврал где? Пример абстрактный. Я же не выложу все 500 строк кода верстки тк никто их смотреть не будет

[0xD34F]

наврал где?

В тексте вопроса блоки показаны рядом:

<div class="div1"></div>
<div class="div2"></div>

В комментариях к ответу выясняется, что это не так:

блоки в разных частях сайта

То есть, в тексте вопроса была сообщена ложная информация. Это и есть враньё. Спрашиваю ещё раз - зачем вы врёте?

[MRcracker]

0xD34F, я вам сказал, что они в разных частях сайта. Вы поняли проблему. Если можете помочь, то помогите, если не можете или не хотите, то не помогайте, но зачем вы пишите что-то про вранье и тп?

[0xD34F]

Вы поняли проблему.

Нет.

Если можете помочь, то помогите

Уже помог. Что-то не видел ваших объяснений, чем предложенное решение вас не устраивает.

зачем вы пишите что-то про вранье и тп?

Целесообразность ведения содержательного общения с лжецами вызывает у меня серьёзные сомнения. Так что, прежде чем продолжить, сперва желаю понять, почему вы врали.

[MRcracker]

0xD34F, до свидание