Wie unten gezeigt:
Kopieren Sie den Codecode wie folgt:
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title></title>
<style type="text/css">
.toopTip
{
Hintergrundfarbe:Gelb;
Rahmenstil:solid;
Rahmenbreite:1px;
Randfarbe:Rot;
}
</style>
<script language="javascript" type="text/javascript">
/*
Wenn Sie möchten, dass sich der linke und obere Rand des angeforderten Div mit dem angezeigten Div überlappt, müssen Sie den Dokumentkopf des W3C-Standards löschen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
*/
Funktion initEvent() {
var divArray = document.getElementsByTagName("div");
for (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = createDivDetailOne;
/*
Das ursprüngliche Div kann nicht zum Binden des Mausbewegungsereignisses verwendet werden, da die Breite und Länge des detaillierten Div größer sind als die des ursprünglichen Div.
Auf diese Weise wird das ursprüngliche Div abgedeckt und das Onmouseout-Ereignis wird automatisch ausgelöst.
*/
//divArray[i].onmouseout = removeDivDetail;
}
}
Funktion createDivDetailOne() {
//Stellen Sie die Einzigartigkeit von divDetail div sicher
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);
//Zu diesem Zeitpunkt hat das für Details verwendete Div das ursprüngliche Div abgedeckt, daher muss das abgedeckte Div ereignisverarbeitet werden.
document.getElementById("divDetail").onmouseout = function() {
divObj = this;
if (!divObj) {
zurückkehren;
}
document.body.removeChild(divObj);
};
}
Funktion removeDivDetail() {
var divObj = document.getElementById("divDetail");
if (!divObj) {
zurückkehren;
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</script>
</head>
<Körper>
<div id="divOne" style="background-color: Fuchsia; width: 100px; height: 100px;" >
Hallo meine Js-Welt!
</div>
<div id="divTwo" style="background-color: Aqua; width: 100px; height: 100px">
Willkommen in meiner Js-Welt!
</div>
<div id="divThree" style="background-color: Gray; width: 100px; height: 100px">
DAS IST MEINE Js-Welt!
</div>
</body>
</html>