Переключите видимость div, наведя указатель мыши на соответствующий элемент навигации с помощью JS. ⇐ CSS

[Anonymous]

У меня есть раскрывающееся мегаменю, состоящее из двух столбцов. В столбце 1 содержится список терминов, и при наведении указателя мыши на термины должен стать видимым соответствующий элемент div.
Также должна быть видна первая комбинация элемента списка и соответствующего элемента div. при входе в раскрывающийся список.
Вот что у меня есть:

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function(event) {
let ktnavList = document.querySelector(".mm-dropdown--nav").children;
let ktcatList = document.querySelector(".mm-dropdown--cat").children;
for (let i=0; i {
cat.classList.toggle('active-item');
});
li.addEventListener('mouseleave', () => {
cat.classList.toggle('active-item');
});
};
});

Я могу переключать все элементы, кроме первого.
Мне нужно, чтобы первый элемент div скрывался при наведении курсора на второй элемент списка, но снова становился видимым при повторном входе в раскрывающийся список. (это должно быть стандартное состояние раскрывающегося списка).
Я также думаю, что мне не нужна часть «mouseleave». Потому что это не позволит пользователю получить доступ к содержимому элементов div (больше элементов навигации).
Желаемое поведение будет заключаться в том, что если я наведу указатель мыши над одним элементом списка, все остальные элементы div, принадлежащие другому элементы списка будут скрыты (переключить класс «активный элемент»).
Я не знаю, как переключить все остальные элементы div, которые не прикреплены к «mouseenter».
Заранее спасибо.

Подробнее здесь: https://stackoverflow.com/questions/791 ... tem-with-j