javascript - 一連の div でのマウスアウトが正しく機能しない

Question

n 個の子 div を含む親 div があるコードを実装していました。メイン 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>

マウスインすると、コードが奇妙に動作します。メインの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
{
}
}