Предотвратить исчезновение div с помощью OnMouseOut, используя операторы Javascript if

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