views:

84

answers:

2
<html>
      <div id="divPopup" onmouseout="removeDIV(this,event);" style="display:none;width:100px;height:100px;color:Navy;border:2px;border-color:Red;border-style:solid;">
        Yes its me
        </div>

        <table>
        <tr><td>A</td></tr>
        <tr><td>S</td></tr>
        <tr><td onmouseover="loadDIV(event)" onmouseout="removeDIV(this,event);">D</td></tr>
        <tr><td>E</td></tr>
        </table>

    </html>
    <script language="javascript" type="text/javascript">
    function loadDIV(evt)
    {
    var myWin = document.getElementById('divPopup');
    myWin.style.position='absolute';
    myWin.style.left = evt.x;
    myWin.style.top = evt.y;
    myWin.style.display='block';

    }

    function removeDIV(obj,evt)
    {
    var myWin = document.getElementById('divPopup');
    myWin.style.display='none';
    myWin.style.left = 0;
    myWin.style.top = 0;
    }
    </script>

if you try to enter mouse into the div it will move away.Any solution for this please?? i want the div to stay still when mouse enters the div region and div should disappear when i do mouseout from div or the td.Any help is appreciated.

A: 

The problem is that onmouseout event fires when you try to enter opened div.
First i suppose you need to timeout removing of div.
And second you need to place a onmouseover event on opened div where you will pause removing of div until mouse will move from the div.

Eldar Djafarov
A: 

Just add the mouse over to your div as well, e.g:

<div id="divPopup" onmouseover="loadDIV(event)" onmouseout="removeDIV(this,event);" style="display:none;width:100px;height:100px;color:Navy;border:2px;border-color:Red;border-style:solid;">
Mr. Smith