js实现鼠标移上去显示详细信息

效果是：鼠标移动到某个位置，显示这个位置对应的详细信息。

<style type="text/css">
li
{
cursor:pointer;
list-style:none;
width:200px;
height:20px;
border:1px solid #999;
}
</style></p>

<ul>

            <li onmouseover="mouseover(this)" onmouseout="mouseout()">1</li>

            <li onmouseover="mouseover(this)" onmouseout="mouseout()">2</li>

            <li onmouseover="mouseover(this)" onmouseout="mouseout()">3</li>

            <li onmouseover="mouseover(this)" onmouseout="mouseout()">4</li>

   </ul>

<script type="text/javascript">

    var li = document.getElementsByTagName("li");

    var detaildiv = document.createElement("div");

    detaildiv.style.width = "100px";

    detaildiv.id = "detail";

    detaildiv.style.backgroundColor = "#ccc"

    detaildiv.style.height = "100px";

    detaildiv.style.border = "1px solid #f00";

    detaildiv.style.position = "absolute";

    function mouseover(demo) {

        detaildiv.innerHTML = demo.innerHTML;

        document.body.appendChild(detaildiv);

        document.getElementById("detail").style.display = "";

        detaildiv.style.left = event.clientX + "px";

        detaildiv.style.top = event.clientY + "px";

    }

    function mouseout() {

        document.getElementById("detail").style.display = "none";

    }

</script>