How to show div on mousehover?

Javascript Part:
<script type="text/javascript">
function Show(id) {
var div1 = document.getElementById("MainContent_div1");
div1.style.display = "block";
var ev = window.event;
var x = ev.clientX;//mouse position from left
var y = ev.clientY;//mouse position from top
div1.style.left = x;
div1.style.top = y;
}
function Hide(id) {
var div1 = document.getElementById("MainContent_div1");
div1.style.display = "none";
}
</script>


html part
<span id="MainContent_lbl1" onmouseover="javascript:Show(this);">Test <div id="MainContent_div1" style="position: absolute; z-index: 999; display: none;">
<table bgcolor="blue">
<tr>
<td>
<input name="ctl00$MainContent$txt1" type="text" id="MainContent_txt1" />
</td>
</tr>
<tr>
<td>
<input name="ctl00$MainContent$TextBox1" type="text" id="MainContent_TextBox1" />
</td>
</tr>
<tr>
<td>
<input name="ctl00$MainContent$TextBox2" type="text" id="MainContent_TextBox2" />
</td>
</tr>
<tr>
<td>
<input name="ctl00$MainContent$TextBox3" type="text" id="MainContent_TextBox3" />
</td>
</tr>
<tr>
<td>
<input name="ctl00$MainContent$TextBox4" type="text" id="MainContent_TextBox4" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="ctl00$MainContent$btn1" value="Close" onclick="javascript:Hide(this);return false;" id="MainContent_btn1" />
</td>
</tr>
</table>
</div>