Javascript 将内容悬停在两个元素上显示

所以我有一个菜单，在悬停状态下显示一个包含所有页面链接的容器。我使用javascript使它在菜单项的悬停处可见。看起来是这样的：

在菜单项的悬停处，它看起来像这样

问题是当我将鼠标移到容器上，单击它将显示的链接时：再次无

这是我的javascript代码：

    var topbestemmingen =  document.getElementById('menu-topbestemmingen');

    document.querySelectorAll('#menu-link-topbestemmingen').forEach(el => 
    el.addEventListener('mouseover', function() {
        topbestemmingen.classList.add('active');
    }))

    document.querySelectorAll('#menu-link-topbestemmingen').forEach(el => 
    el.addEventListener('mouseout', function() {
        topbestemmingen.classList.remove('active');
    }))

---

因此，容器具有ID#menu-toppestemmingen，链接位于menu#menu-link-toppestemmingen中。有人知道如何选择要在悬停时显示的容器吗？

尝试将鼠标悬停->激活添加到#菜单topbestemmingen，并停用鼠标悬停。因此，应该有四个事件侦听器

但我建议在“链接菜单”和“关闭菜单”下添加一个层，然后将事件侦听器添加到该层，以便关闭菜单

var-topbestemmingen=document.getElementById（'menu-topbestemmingen'）；
document.querySelectorAll（“#菜单链接topbestemmingen”）.forEach（el=>
el.addEventListener（'mouseover'，function（）{
topbestemmingen.style.display='block'
}))
document.querySelectorAll（“#菜单链接topbestemmingen”）.forEach（el=>
el.addEventListener（'mouseout'，function（）{
topbestemmingen.style.display='none'
}))
document.queryselectoral（“#menu toppestemingen”）.forEach（el=>
el.addEventListener（'mouseover'，function（）{
topbestemmingen.style.display='block'
}))
document.queryselectoral（“#menu toppestemingen”）.forEach（el=>
el.addEventListener（'mouseout'，function（）{
topbestemmingen.style.display='none'
}))

#菜单顶部最佳菜单{
显示：无；
}

链接菜单项
项目1
项目2
项目3
项目4

请在在线平台上分享此问题，以便更清楚地理解。您可以在中共享代码吗？您不应该多次使用ID属性。相反，您可以使用自定义属性，例如，

数据菜单topbestemmingen

。听起来子菜单不在您悬停的项目内，因此会触发鼠标出。所以需要一种方法来告诉代码鼠标在子元素上。通常会有更多的事件侦听器。请在您的问题中创建一个。我认为会有/应该有一个“更干净/更好”的方法，但这也非常有效。我会像这样使用它，谢谢！