使用Javascript阻止div與OnMouseOut失蹤，如果語句

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