Conforme mostrado abaixo:
Copie o código do código da seguinte forma:
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<título></título>
<style type="texto/css">
.toopTip
{
cor de fundo:Amarelo;
estilo de borda: sólido;
largura da borda: 1px;
cor da borda:Vermelho;
}
</estilo>
<linguagem script="javascript" type="text/javascript">
/*
Se você deseja que as bordas esquerda e superior do div solicitado se sobreponham ao div exibido, você precisa excluir o cabeçalho do documento padrão 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;
/*
O div original não pode ser usado para vincular o evento de movimento do mouse, porque a largura e o comprimento do div detalhado são maiores que o div original.
Desta forma, o div original é coberto e o evento onmouseout será acionado automaticamente.
*/
//divArray[i].onmouseout = removeDivDetail;
}
}
função criarDivDetailOne() {
//Garante a exclusividade da div divDetail
var divDetail = document.getElementById("divDetail");
if(divDetalhe)
{
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 = window.event.srcElement;
divObj.style.top = triggerObj.offsetTop;
divObj.style.left = triggerObj.offsetLeft;
divObj.innerHTML = triggerObj.innerText;
document.body.appendChild(divObj);
//Neste momento, o div usado para detalhes cobriu o div original, então o div coberto precisa ser processado por evento.
document.getElementById("divDetail").onmouseout = function() {
divObj = isto;
se (!divObj) {
retornar;
}
document.body.removeChild(divObj);
};
}
function removeDivDetail() {
var divObj = document.getElementById("divDetail");
se (!divObj) {
retornar;
}
document.body.removeChild(divObj);
}
janela.onload = initEvent;
</script>
</head>
<corpo>
<div id="divOne" style="cor de fundo: Fúcsia; largura: 100px; altura: 100px;"
Olá meu mundo Js!
</div>
<div id="divTwo" style="cor de fundo: Aqua; largura: 100px; altura: 100px">
Bem-vindo ao Meu Mundo Js!
</div>
<div id="divThree" style="cor de fundo: Cinza; largura: 100px; altura: 100px">
ESTE É O MEU Js Mundo!
</div>
</body>
</html>