以下に示すように:
次のようにコードをコピーします。
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<タイトル></タイトル>
<style type="text/css">
.topTip
{
背景色:黄色;
境界線のスタイル:実線;
ボーダー幅:1px;
境界線の色:赤;
}
</スタイル>
<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」
*/
関数 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;
}
}
関数 createDivDetailOne() {
// divDetail div の一意性を確保する
var divDetail = document.getElementById("divDetail");
if(divDetail)
{
document.body.removeChild(divDetail);
}
divObj = document.createElement("div");
divObj.className = "トップチップ";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "絶対";
divObj.style.width = "200px";
divObj.style.height = "100px";
vartriggerObj = window.event.srcElement;
divObj.style.top = トリガーObj.offsetTop;
divObj.style.left = トリガーObj.offsetLeft;
divObj.innerHTML =triggerObj.innerText;
document.body.appendChild(divObj);
//この時点で詳細に使用するdivは元のdivを覆っているため、覆われたdivをイベント処理する必要があります。
document.getElementById("divDetail").onmouseout = function() {
divObj = これ;
if (!divObj) {
戻る;
}
document.body.removeChild(divObj);
};
}
関数removeDivDetail() {
var divObj = document.getElementById("divDetail");
if (!divObj) {
戻る;
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</script>
</head>
<本文>
<div id="divOne" style="背景色: フクシア; 幅: 100px; 高さ: 100px;" >
こんにちは、私の Js ワールド!
</div>
<div id="divTwo" style="背景色: アクア; 幅: 100px; 高さ: 100px">
My Js ワールドへようこそ!
</div>
<div id="divThree" style="背景色: グレー; 幅: 100px; 高さ: 100px">
これが私のJsワールドです！
</div>
</body>
</html>