Onmouseout Issue

[programming.name]

Hi,

 

Please consider the following image:

 

 

As you can see, there are 4 divs being one big green, "test_div" and 3 small squre divs, "div_1"," div_2", "div_3".

 

All I want to do is trying to trigger some mouse events with these.

 

When the page is loaded, the following function is called and the above divs are basically all hidden:

 

function hide_div()

{

document.getElementById("test_div").style.visibility = "hidden";

}

 

and whenever the mouse cursor is over them another event is triggered with this function:

 

function show_div()

{

document.getElementById("test_div")style.visibility = "visible";

}

 

And html code(partial):

 

 

<div id="test_div" onmouseover="show_div();" onmouseout="hide_div();">

 

<div id="div_1"></div>

 

<div id="div_2"></div>

 

<div id="div_3"></div>

 

</div>

 

All it does is simply hide-and-show function, but when I actully do that it does't work what I intended;

 

when I put the cursor on "test_div"(green part only) it does show all the 4 divs correctly but as soon as I move the cursor

 

to the one of three square divs(div_1, div_2 or div_3; didn't really matter) all the divs are gone and sometimes it blinks.

 

I figured out that this is because onmouseover="show_div() is only triggered to "test_div" but apart from that I have no idea

 

how to solve this. Pleae help!! thanks.

Edited December 2, 2012 by programming.name

[requinix]

Pretty sure onmouseover/onmouseout don't count for child elements.

 

Use CSS for this instead of Javascript.

#test_div > div { visibility: hidden; }
#test_div:hover > div { visibility: visible; }

Edited December 2, 2012 by requinix