使用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;
}