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

转载自品略图书馆 http://www.pinlue.com/article/2018/09/2614/177365783206.html

 

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

<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>