使用 Javascript if 语句通过 OnMouseOut 防止 div 消失

Question

在我正在处理的这个导航栏中，当您将鼠标悬停在按钮上时，我会出现一个 div，当您将鼠标移出按钮时，它会消失。问题是，当我将鼠标移出按钮并向下移动到出现的 div 时，我不希望该 div 消失，因为它包含链接。我希望它仅在我将鼠标移出按钮（而不是出现的 div 上）并移出出现的 div 时消失。

我为此使用 OnMouseOver 和 OnMouseOut 函数。

我应该在 else 语句中使用 if 语句吗？这将允许我做我正在寻找的事情（如上所述）？

JavaScript：

function showlayer(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else { 
myLayer.style.display="none";
}
}

HTML：

<div id="topBar">
    <div id="navContainer">
    (...)
    <a href="#" class="nav" onmouseover="javascript:showlayer('commLinks')" onmouseout="javascript:showlayer('commLinks')"><div class="communityBtn">Community</div></a>

<div id="subnavLayer">
<div class="commHidden" id="commLinks">
    <div class="commLinksText">Booster Club</div>
    <div class="commLinksText">PTO</div>
    <div class="commLinksText">Fine Arts</div>
    <div class="commLinksText">City of West Branch</div>
</div>

Answer 1

我认为人们通常通过使弹出导航成为标题的子节点来完成此类事情。这样，当用户将鼠标悬停在弹出窗口的选项上时，从技术上讲，鼠标仍然位于标题内，并且不会触发 mouseout 事件。

<div id="topBar">
    <div id="navContainer">
    <div class="nav" onmouseover="javascript:showlayer('commLinks')" onmouseout="javascript:showlayer('commLinks')">
        <div class="communityBtn">Community</div>
        <div id="subnavLayer" style="position:absolute">
            <div class="commHidden" id="commLinks">
                <div class="commLinksText">Booster Club</div>
                <div class="commLinksText">PTO</div>
                <div class="commLinksText">Fine Arts</div>
                <div class="commLinksText">City of West Branch</div>
            </div>
        </div>
    </div>
</div>

以这种方式构建 HTML 的最佳部分是，您实际上可以获得仅包含 CSS 而根本不需要脚本的弹出窗口。基本上你的风格看起来像这样：

#subnavLayer {
    display:none;
}
.nav:hover #subnavLayer {
    display:block;
}