Question

在我正在处理的导航栏中，鼠标悬停在按钮上时会显示div，当鼠标滑出按钮时它会消失。问题是，当我将鼠标移出按钮并向下移动到出现的div时，我不希望div消失，因为它包含链接。我希望它只有当我从按钮（不是出现在div上）和出现的div之外鼠标时才会消失。

我正在使用OnMouseOver和OnMouseOut函数。

如果我在else语句中使用了什么语句，这将允许我做我正在寻找的事情（如上所述）？

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

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

1 个答案: