<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
</Head>
<Body>
<Form id = "form1" runat = "server">
Problem: when the green DIV is displayed, it's okay to move the mouse into the DIV, and move it to a small local area (above the four letters of aaaa) on the top of the aaaa. The DIV is closed. I don't know why.
<Div style = "margin: 0px auto 0px auto; position: absolute; left: 250px; top: 250px; padding: 20px; z-index: 1;">
<Asp: LinkButton ID = "LinkButton1" onmouseover = "over (this, document. all. se) "onmouseout =" timer = setTimeout ('out (document. all. se) ', 500) "OnClientClick =" alert ('left' + this. offsetLeft + '; top' + this. offsetTop + '; height' + this. offsetHeight + '; Kuan' + this. offsetWidth); return false; "runat =" server "> M me </asp: LinkButton>
</Div>
<Div id = "se" onmouseover = "clearTimeout (timer); this. style. display = 'block' "onmouseout =" out (this) "style =" background-color: # 32ba5c; display: none; width: 200px; position: absolute; padding: 20px; ">
<Div> aaaa </div>
<Div> bbbb <input type = "button" onclick = "this. parentElement. parentElement. style. display = 'none'" value = "close"/> </div>
<Div> aaaa </div>
<Div> bbbb </div>
<Div> aaaa </div>
<Div> bbbb </div>
</Div>
</Form>
</Body>
</Html>
<Script>
Function over (obj, div)
{
Var rec = getoffset (obj );
Div. style. top = rec [0] + obj. offsetHeight;
Div. style. left = rec [1];
Div. style. display = "block ";
}
Function out (div)
{
Div. style. display = "none ";
}
Function getoffset (e)
{
Var t = e. offsetTop;
Var l = e. offsetLeft;
While (e = e. offsetParent)
{
T + = e. offsetTop;
L + = e. offsetLeft;
}
Var rec = new Array (1 );
Rec [0] = t;
Rec [1] = l;
Return rec
}
</Script>