悬停在列表上时显示 div (li / span) [关闭]答案

【问题标题】：Show div when hovering over list (li / span) [closed]悬停在列表上时显示 div (li / span) [关闭]
【发布时间】：2020-11-23 18:50:32
【问题描述】：

我只是无法让它运行。我有“默认”的 WordPress 菜单。我直接在我的标题/菜单下创建了一个单独的 div。这是一种超级菜单。在我看来，这很简单。但是当我将鼠标悬停在所需的菜单点上时，我无法触发 div 显示。

我用 css 尝试了一切。但我认为不可能用它触发它，因为它不是兄弟或父 div。

你有什么想法，因为它不可能那么疯狂吧？我用 display:none 隐藏了 div，当悬停在“#menu-item-136 > a:nth-child(1)”上时，它应该再次显示：block。我觉得那个容易吗？

#menu-item-136 > a:nth-child(1):hover + .mega-menu {display:block;}
#menu-item-136 > a:nth-child(1):hover ~ .mega-menu {display:block;}
#menu-item-136 > a:nth-child(1):hover > .mega-menu {display:block;}

什么都不做。

你能帮忙吗？：/

添加代码：

<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
            <a href="#" class="aux-item-content">
                <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
            <span class="aux-submenu-indicator"></span></a>

</br>
</br>   
  
<div class="mega-menu">content</div>

我自己已经解决了。谢谢。我也不知道为什么这个简单的问题需要“关闭，因为它需要调试细节”！？我可以更容易地提出这个问题：一个 Menupoint，一个 div，在将鼠标悬停在 menupoint 上时显示 div？！？！我发现了一个带有鼠标悬停的简单javascript。如果这个问题很难，你可以删除它。谢谢。

【问题讨论】：

如果 div 不是孩子或兄弟姐妹，您将无法使用 CSS 上树并返回。
没有看到其元素的 html 没有响应是可能的
我为你输入了代码。请考虑，菜单是主题默认菜单。我不知道这是否会使编辑结果变得更加困难。还没有应用“display:none”，所以你可以看到 div。希望你能帮忙。

标签： javascript menu hover display megamenu

【解决方案1】：

li .mega-menu {
  display: none;
}
#menu li > a:hover ~ div {
  display: block !important;
}

<ul id="menu">
  <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
    <a href="#" class="aux-item-content">
      <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
      <span class="aux-submenu-indicator"></span>
    </a>
    <div class="mega-menu">content</div>
  </li>
</ul>

【讨论】：

如我所见，您已将大型菜单 div 放入 ul 中。我可以在不将 div 放入 ul 代码的情况下实现这一点吗？问题是我必须编辑主题代码，对吗？是否没有 Javascript 可以触发此操作而无需将 div 移动到另一个元素内？那很好啊！感谢您的帮助！
是的，你可以在hover锚标签或li上触发JS事件。在您的主题中，我们是为每个 li 使用多个 div 标签还是为所有 li 使用单个 div 标签？
嗨，我发现了。谢谢。当您知道代码时，代码很容易。因为我是初学者，所以更难。但我能找到它。这是解决方案的一部分：<script> document.getElementById("menu-item-136").addEventListener("mouseover", mouseOver); document.getElementById("menu-item-136").addEventListener("mouseout", mouseOut); function mouseOver() { document.getElementById("mega-menu").style.display = "block"; } function mouseOut() { document.getElementById("mega-menu").style.display = "none"; } </script>