title: showing floating div in a gridview
body: <p>I have a gridview and when i mouse hover on a particular column, i am loading an external div(position:absolute) into that position.This i have done by calling a js function in the onmouseover event of the gridview cell(gvTestGrid.cells[1].attributes.add("onmouseover","loadDIV();")).
  I am able to load the div properly on mouse hover, but the problem is my loaded div contains a dropdown and button inside it. when i try to move my mouse inside the div to click the button or select the dropdown list, the div moves away.This happens after i added
  onmouseout event(gvTestGrid.cells[1].attributes.add("onmouseout","removeDIV();"))</p>
  
  <p>without onmouse out event my div will remain loaded there on the gridview cell.Please help</p>
  
  <p>i have done a small sample</p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
    &lt;div id="divPopup" onmouseout="removeDIV(this,event);" style="display:none;width:100px;height:100px;color:Navy;border:2px;border-color:Red;border-style:solid;"&gt;
      Yes its me
      &lt;/div&gt;
  
      &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;S&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td onmouseover="loadDIV(event)" onmouseout="removeDIV(this,event);"&gt;D&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;E&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/html&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  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;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>if you try to enter mouse into the div it will move away.Any solution for this please??</p>