Как при ховере на ссылку отобразить скрытый блок, находящийся в другом контейнере?

Question

[leyarthemes]

Здравствуйте, есть ссылка, при наведении на которую должен отобразиться скрытый блок, который находится в другом контейнере (у них далеко разные родительские блоки), чтобы этот блок появлялся рядом с этой ссылкой, как подсказка, но он должен так же реагировать (не скрываться обратно) когда указатель мыши находится в его области. Есть ли способ реализации такого на JS без jquery и плагинов? Спасибо.

Answer 1

[Игорь]

1. Повесить обработчик ховера на ссылку.
2. В нем найти скрытый блок.
3. Сдублировать блок и положить его в корень документа(body) чтобы не было проблем с позиционированием.
4. взять у ссылки ее расположение относительно документа и задать скрытому блоку
который абсолютно спозиционирован и дать ему видимость.
5. повесить на показанный блок обработчик mouseout который будет удалять блок.

Comments

[leyarthemes]

Спасибо, а по 3-ему пункту, это обязательно? И нужно абсолютное позиционирование, не фиксированное?

[Игорь]

можно и фиксированное, но лучше такие блоки располагать в корне, все библиотеки так делают.

Answer 2

[inzeppelin]

Да, но JS нужен все равно.
Для этого можно использовать события mouseover и mouseout

// Элемент на который наводим курсор
const hoverElement = document.querySelector('.hover_element');
// Элемент который скрываем
const hideElement = document.querySelector('.hide_element');

hoverElement.addEventListener('mouseover', () => hideElement.style.display = 'block');
hoverElement.addEventListener('mouseout', () => hideElement.style.display = 'none');

Answer 3

[Валентин]

Есть ли способ реализации такого без jquery и плагинов?

только на CSS такого сделать нельзя

Comments

[leyarthemes]

Я в курсе, извиняюсь, забыл написать что нужен JS, исправил