效果是：鼠標移動(dòng)到某個(gè)位置，顯示這個(gè)位置對應的詳細信息。
<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>
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
