CODEWITHSUNDEEP
javascripthtmlonmouseout
Praveen Singh
Praveen Singh

Reputation: 542

Mouseout on a set of divs not working properly

I was implementing a code in which i have parent div which contains n number of child divs. I have a mouseout function for main div as well as different mouseout function for child divs.

My code structure will be like this.

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

The code works weird when i mousein. When i mouseover the main div it visibility is set to hidden. But my code was to change the visibility only when mouseout. Is it because of the child divs inside the parent div? How to rectify it?

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

Upvotes: 0

Views: 2756

Answers (1)

Arie Xiao
Arie Xiao

Reputation: 14082

You div#root is just a wrapper div, it doesn't have any directly visual text node or padding white space. So it won't issue an mouse event on its own.

It receives the mouseout event from its visible descendent elements, by event bubbling. So any time your mouse leaves div#top or div#main (div#1, div#2, ... indeed), an mouseout event will be raised and bubbled to div#root.

Since you didn't explain the detailed effects you want, no good answer can be made.

If you are writing a dropdown navigation panel with mouseover/mouseout effects, you can add an mouseover handler to div#root to show div#main. When you move your mouse from one item to another in div#main, mouseover will fired after mouseout and before the execution of the mouseout handler.

Check jsFiddle to see if it's what you want. Note that the hover effect can be implemented purely in CSS.

Upvotes: 4

Related Questions