como se muestra a continuación:
<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”>
/*
Si el límite izquierdo del DIV desea superponerse al DIV que muestra el límite superior, entonces debe eliminar el estándar W3C del encabezado del documento
<!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;
/*
El incidente que no se puede eliminar del mouse con el DIV original, porque la longitud de ancho del DIV detallado es mayor que el Div original,
Entonces el DIV original está cubierto, y el evento OnMouseOut se activará automáticamente en este momento
*/
//divArray[i].onmouseout = removeDivDetail;
}
}
function createDivDetailOne() {
// Garantizar la singularidad del 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);
// En este momento, el DIV utilizado para detalles ha cubierto el DIV original, por lo que el DIV cubierto debe ser procesado por el evento
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>