鼠标移到一单元格上在鼠标位置出现一个层<div>,移走时隐藏该层。如何实现？

<script language="javascript" type="text/javascript">

function showIt(text)
{
var Ucon = document.getElementById('con');
Ucon.innerText = text;
Ucon.style.left = event.x-5;
Ucon.style.top = event.y-10;
Ucon.style.visibility = 'visible';
}</script>
</HEAD><BODY>
<div id="p" style="position:absolute;z-index:2">
<div id="con" style="position:relative;z-index:3;border:1px;background:#33FF00;width:80px;"></div>
<TABLE border=1 width=50% align=center>
<TR>
<TD onmouseover="showIt('11111111111');" onmouseout="con.style.visibility='hidden';">11111111</TD>
<TD onmouseover="showIt('22222222');" onmouseout="con.style.visibility='hidden';">222222222</TD>
<TD onmouseover="showIt('33333333');" onmouseout="con.style.visibility='hidden';">3333333333333</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>