Question

我正在尝试制作一个下拉列表，我已经做了一些工作。当我将鼠标放在该区域上时，下拉形状的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";
}

Answer 1

通常是因为鼠标离开了原来的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 }

Answer 2

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

我还注意到您正在将显示更改为无。一旦显示设置为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中的父级或子级上。我希望这有帮助！

下拉div不会保持可见

2 个答案: