|
效果是：鼠標移動到某個位置，顯示這個位置對應的詳細信息。 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>
|
|
|
