Onmouseover/onmouseout Not Working Properly.

[GuitarGod]

Hi all,

 

I've posted this in HTML as I'm sure this is a HTML problem. I'm using SPAN and Javascript to create a floating box when an onmouseover event is triggered, and the box should close when onmouseout comes into effect (the box should stay open whilst the mouse is not only over the box triggering event, but over the box itself). This semi-works, as the floating box does appear on onmouseover, yet onmouseout, the box closes for a few milliseconds then re-opens - it should stay closed. Any ideas on this?

 

An example of my code is as follows.

 

<span onmouseover="document.getElementById('box').style.display='';" onmouseout="document.getElementById('box').style.display='none';">Box event</span>
<span id="box" style="position:absolute; display:none" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">
<table>
 -- TABLE_CODE_HERE
</table>
</span>

[GuitarGod]

In messing around with my code, I've managed to fix my problem. I'm not too sure how/why it existed, but having a SPAN inside another SPAN seemed to cause the onmouseout not to function properly and making the box re-appear:

 

<span onmouseover="document.getElementById('box').style.display='';" onmouseout="document.getElementById('box').style.display='none';">Box event
<span id="box" style="position:absolute; display:none" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">
<table>
-- TABLE_CODE_HERE
</table>
</span></span>

 

Really I should have used the code in my first post and kept the SPANs separate.

 

Thank you for reading anyway!

[kicken]

When you move your mouse from the first span to the second, you are going to be triggering the onmouseout event of the first span (hiding the span) and the following it up with the onmouseover which re-shows it (assuming you move the mouse fast enough to trigger both).

 

What you need to do is add a delay in the hiding, and cancel the hiding if the user mouses over the second span. Something like this:

var timer=null;
var span1=document.getElementById('label');
var span2=document.getElementById('box');
function showPopup(){
   span2.style.display = '';
   if (timer){
       clearTimeout(timer);
       timer = null;
   }
}
function hidePopup(){
   timer = setTimeout(function(){
       span2.style.display='none';
   }, 250); //Will hide the div in .25 seconds, unless canceled above first.
}

 

<span id="label" onmouseover="showPopup()" onmouseout="hidePopup();">Box event</span>
<span id="box" style="position:absolute; display:none" onmouseover="showPopup();" onmouseout="hidePopup();">
<table>
        -- TABLE_CODE_HERE
</table>
</span>

 

That will cause the hiding of the span to be delayed by .25 seconds (you could adjust as necessary) which gives a small amount of time for the popup span's onmouseover event to fire which will cancel the hiding of the span.

[GuitarGod]

I hadn't thought this far ahead, and this will probably become a problem at some point! Thank you very much for the code and for the advice It is much appreciated