Como se muestra a continuación:
Copie el código de código de la siguiente manera:
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<título></título>
<tipo de estilo="texto/css">
.toopConsejo
{
color de fondo: amarillo;
estilo de borde: sólido;
ancho de borde: 1px;
color del borde: rojo;
}
</estilo>
<script idioma="javascript" tipo="texto/javascript">
/*
Si desea que los bordes izquierdo y superior del div solicitado se superpongan con el div mostrado, debe eliminar el encabezado del documento estándar W3C.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//ES"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*/
función eventoinit() {
var divArray = document.getElementsByTagName("div");
para (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = createDivDetailOne;
/*
El div original no se puede utilizar para vincular el evento de movimiento del mouse, porque el ancho y el largo del div detallado son mayores que el div original.
De esta manera, se cubre el div original y el evento onmouseout se activará automáticamente.
*/
//divArray[i].onmouseout = removeDivDetail;
}
}
función crearDivDetailOne() {
//Asegurar la unicidad de divDetail div
var divDetail = document.getElementById("divDetail");
si(divDetalle)
{
document.body.removeChild(divDetail);
}
divObj = document.createElement("div");
divObj.className = "toopTip";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "absoluto";
divObj.style.width = "200px";
divObj.style.height = "100px";
var triggerObj = ventana.event.srcElement;
divObj.style.top = triggerObj.offsetTop;
divObj.style.left = triggerObj.offsetLeft;
divObj.innerHTML = triggerObj.innerText;
documento.body.appendChild(divObj);
// En este momento, el div utilizado para los detalles ha cubierto el div original, por lo que el div cubierto debe procesarse por eventos.
document.getElementById("divDetail").onmouseout = función() {
divObj = esto;
si (!divObj) {
devolver;
}
documento.body.removeChild(divObj);
};
}
función eliminarDivDetail() {
var divObj = document.getElementById("divDetail");
si (!divObj) {
devolver;
}
documento.body.removeChild(divObj);
}
ventana.onload = initEvent;
</script>
</cabeza>
<cuerpo>
<div id="divOne" style="color de fondo: fucsia; ancho: 100px; alto: 100px;" >
¡Hola mi mundo Js!
</div>
<div id="divTwo" style="color de fondo: Aqua; ancho: 100px; alto: 100px">
¡Bienvenidos a Mi Mundo Js!
</div>
<div id="divThree" style="color de fondo: gris; ancho: 100px; alto: 100px">
¡ESTE ES MI Mundo Js!
</div>
</cuerpo>
</html>