Problems with mouseout event

Question

I\'m using JavaScript to hide an image and show some text thats hidden under it. But, when the text is shown if you scroll over it, it fires the mouseout event on the container,

Answer 1

I'd give the container div:

position: relative;

and add a third div in the container (should be the last child of the container) with:

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

and catch the mouseover and mouseout events on this div instead.

Because it has no child elements, you shouldn't get spurious mouseover and mouseout events propagating to it.

Edit:

What I believe happens, is that when the cursor moves from a parent element onto a child element, a mouseout event occurs on the parent element, and a mouseover event occurs on the child element. However, if the mouseover handler on the child element does not catch the event and stop it propagating, the parent element will also receive the mouseover event.