<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.toopTip
{
background-color:Yellow;
border-style:solid;
border-width:1px;
border-color:Red;
}
</style>
<script language="javascript" type="text/javascript">
/*
如果希望提示的div的左邊界與上邊界與顯示的div重疊，那么需要刪除文檔頭W3C標準
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*/
function initEvent() {
var divArray = document.getElementsByTagName("div");
for (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = createDivDetailOne;
/*
無法用原始的div綁定鼠標移走的事件,因為明細的div的寬度長度都要大于原始div，
這樣原始的div就被覆蓋了，此時會自動觸發onmouseout事件
*/
//divArray[i].onmouseout = removeDivDetail;
}
}
function createDivDetailOne() {
//保證divDetail div的唯一性
var divDetail = document.getElementById("divDetail");
if(divDetail)
{
document.body.removeChild(divDetail);
}
divObj = document.createElement("div");
divObj.className = "toopTip";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "absolute";
divObj.style.width = "200px";
divObj.style.height = "100px";
var triggerObj = window.event.srcElement;
divObj.style.top = triggerObj.offsetTop;
divObj.style.left = triggerObj.offsetLeft;
divObj.innerHTML = triggerObj.innerText;
document.body.appendChild(divObj);
//此時用于明細的div已經覆蓋了原div，所以覆蓋的div要進行事件的處理
document.getElementById("divDetail").onmouseout = function() {
divObj = this;
if (!divObj) {
return;
}
document.body.removeChild(divObj);
};
}
function removeDivDetail() {
var divObj = document.getElementById("divDetail");
if (!divObj) {
return;
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</script>
</head>
<body>
<div id="divOne" style="background-color: Fuchsia; width: 100px; height: 100px;" >
Hello My Js World!
</div>
<div id="divTwo" style="background-color: Aqua; width: 100px; height: 100px">
Welcome to My Js World!
</div>
<div id="divThree" style="background-color: Gray; width: 100px; height: 100px">
THIS IS My Js World!
</div>
</body>
</html>
