下拉 div 不保持可见答案

【问题标题】：Drop down div doesn't stay visible下拉 div 不保持可见
【发布时间】：2014-02-08 22:58:31
【问题描述】：

我正在尝试制作一个下拉列表，并且我已经让它有点工作了。当我将鼠标放在该区域上时，下拉形状的 div 变得可见。然后，当您将鼠标放在 div 中的任何内容上时，它就会消失。这显然不应该发生。这是我的代码。非常感谢任何解决方案。

HTML： <li><a onMouseOver="showServersDropDown()" onClick="showServersDropDown()" class="three-d"> Servers Servers Servers </a></li>

    <div onMouseOut="hideServersDropDown()" id="serversDropDown">
        <p>Live Map</p>
       </div> <!--This ends the Server List Drop Down Div-->

JS：

function showServersDropDown() {
    document.getElementById("serversDropDown").style.display="block";
}

function hideServersDropDown() {
    document.getElementById("serversDropDown").style.display="none";
}

【问题讨论】：

@Emanueal 你只使用 onMouseOut 事件函数吗？
您也只想在鼠标悬停时看到菜单或部分？
由于堆栈溢出的 html 引擎，实际上缺少代码部分，希望它在下面：
服务器

【解决方案1】：

我无法重现这个确切的问题，但听起来问题是由于将鼠标悬停在 div 的子元素上触发父 div 的 onmouseout 事件引起的。我找到了可以帮助您的答案：prevent onmouseout when hovering child element of the parent absolute div。

我还注意到您将显示更改为无。一旦 display 设置为 none，div 将不会在浏览器上呈现，这将阻止鼠标事件触发它，因此悬停在该区域不会导致它重新出现。我在这里找到了另一个关于将鼠标悬停在隐藏元素上以显示它的答案：Hover over a hidden element to show it。

此外，当您将鼠标悬停在下拉列表上时，您似乎错过了一个 onmouseover 事件来显示下拉列表，尽管我可能弄错了您要完成的工作。

总而言之，对您的 Javascript 进行两次修改和对您的 HTML 进行少量修改，我认为您可以通过以下方式实现您的预期结果：

<div onmouseout="hideServersDropDown(event)" onmouseover="showServersDropDown(event)" id="serversDropDown">
    <p>Live Map</p>
   </div> <!--This ends the Server List Drop Down Div-->

function showServersDropDown(event) {
    document.getElementById("serversDropDown").style.opacity="1";
}

function hideServersDropDown(event) {
    var e = event.toElement || event.relatedTarget;
    if (e.parentNode == this || e == this) {
       return;
    }
    document.getElementById("serversDropDown").style.opacity="0";
}

我只将事件阻止代码放在 hideServersDropDown 中，因为您希望 onmouseover 事件触发并显示您是悬停在 div 中的父级还是子级上。我希望这会有所帮助！

【讨论】：

我不希望它在您将鼠标放在它上面时变得可见。当您将鼠标悬停在一个区域上时，该区域会触发 showServersDropDown()。因此，我仍然可以使用 display: none，对吗？
是的，在这种情况下，您应该仍然可以使用 display none。您还可以删除 div 的 onmouseover="showServersDropDown(event)" 部分。

【解决方案2】：

这通常是因为鼠标离开了原来的div，关键是让子菜单成为主div的子菜单：

<ul class="menu">
  <li>
    <a>nav title</a>
    <ul>
      <li><a>sub link</a></li>
    </ul>  
  </li>
</ul>

然后在纯 css 中你可以处理这个：

.menu ul { display: none }
.menu li:hover ul { display: block }

【讨论】：

好吧，下拉 div 中唯一的内容就是链接。我该怎么办？
更新了我对传统导航列表的回答
我要睡觉了，所以如果你发帖并期待回复，这就是原因。祝你晚上/一天愉快！