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, that then hides the text and shows the image again, and it just goes into a weird loop.

The html looks like this:

<div onmouseover='jsHoverIn('1')'      onmouseout='jsHoverOut('1')'>     <div id='image1' />     <div id='text1' style='display: none;'>         <p>some content</p>         <p>some more content</p>     </div> </div> 

And the javascript (It uses scriptaculous):

function jsHoverIn(id) {   if(!visible[id]) {     new Effect.Fade ('image' + id, {queue: { position: 'end', scope: id } });     new Effect.Appear ('text' + id, {queue: { position: 'end', scope: id } });     visible[id] = true;   } } function jsHoverOut (id) {   var scope = Effect.Queues.get(id);   scope.each(function(effect) { effect.cancel(); });    new Effect.Fade ('text' + id, {queue: { position: 'end', scope: id } });   new Effect.Appear ('image' + id, {queue: { position: 'end', scope: id } });   visible[id] = false; } 

This seems really simple, but i just cant wrap my head around it.

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.