鼠標移動到一組div上無法正常工作

Question

我正在實現一個代碼，其中包含n個子div的父div。我有一個主鼠標的鼠標功能以及不同的子鼠標的鼠標功能。

我的代碼結構是這樣的。

<div id="root" onmouseout="dohide('main');"> 
<div id="top">title</div> 
<div id="main"> 
<div id="1" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">1</div> 
<div id="2" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">2</div> 
<div id="3" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">3</div> 
<div id="4" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">4</div> 
<div id="5" onmouseover="changecolor(this.id);" onmouseout="recolor(this.id);">5</div> 
</div> 
</div> 

該代碼的作品奇怪，當我mousein。當我將鼠標懸停在主div上時，它的可見性被設置爲隱藏。但我的代碼只是在鼠標移出時才改變可見性。是否因爲父div內的子div？如何糾正它？

function dohide(cb_hd_id) 
{ 
if(document.getElementById(cb_hd_id).style.visibility=="visible") 
{ 
document.getElementById(cb_hd_id).style.visibility="hidden"; 
} 
else 
{ 
} 
} 

Answer 1

你div#root只是一個包裝div，它沒有任何直接可視的文本節點或填充空白。所以它不會自行發出鼠標事件。

它從event bubbling收到mouseout事件的可見後代元素。因此，無論何時您的鼠標離開div#top或div#main（div#1,div#2，...的確如此），mouseout事件將會升起並冒泡至div#root。

由於您沒有解釋所需的詳細效果，因此無法做出正確的答案。

如果你正在寫與mouseover/mouseout效果下拉導航面板，您可以添加一個mouseover處理程序div#root顯示div#main。當您在div#main中將鼠標從一個項目移動到另一個項目時，mouseover將在mouseout之後和mouseout處理程序執行之前觸發。

檢查jsFiddle，看看它是你想要的。請注意，懸停效果可以執行purely in CSS。