ดังที่แสดงด้านล่าง:
คัดลอกรหัสรหัสดังต่อไปนี้:
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title></title>
<style type="text/css">
.toopTip
-
สีพื้นหลัง:สีเหลือง;
สไตล์เส้นขอบ: ทึบ;
เส้นขอบกว้าง: 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");
สำหรับ (var i = 0; i < divArray.length; i++) {
divArray[i].onmouseover = createDivDetailOne;
-
div ดั้งเดิมไม่สามารถใช้เพื่อผูกเหตุการณ์การเลื่อนเมาส์ได้ เนื่องจากความกว้างและความยาวของ div ที่มีรายละเอียดนั้นใหญ่กว่า div ดั้งเดิม
ด้วยวิธีนี้ div ดั้งเดิมจึงถูกครอบคลุม และเหตุการณ์ onmouseout จะถูกทริกเกอร์โดยอัตโนมัติ
-
//divArray[i].onmouseout = ลบDivDetail;
-
-
ฟังก์ชั่น createDivDetailOne() {
//ตรวจสอบความเป็นเอกลักษณ์ของ divDetail div
var divDetail = document.getElementById("divDetail");
ถ้า(รายละเอียด div)
-
document.body.removeChild(divDetail);
-
divObj = document.createElement("div");
divObj.className = "toopTip";
divObj.setAttribute("id", "divDetail");
divObj.style.position = "สัมบูรณ์";
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);
//ในขณะนี้ div ที่ใช้สำหรับรายละเอียดได้ครอบคลุม div ดั้งเดิมแล้ว ดังนั้น div ที่ครอบคลุมจึงต้องได้รับการประมวลผลเหตุการณ์
document.getElementById("divDetail").onmouseout = function() {
divObj = นี่;
ถ้า (!divObj) {
กลับ;
-
document.body.removeChild(divObj);
-
-
ฟังก์ชั่น RemoveDivDetail() {
var divObj = document.getElementById("divDetail");
ถ้า (!divObj) {
กลับ;
-
document.body.removeChild(divObj);
-
window.onload = initEvent;
</สคริปต์>
</หัว>
<ร่างกาย>
<div id="divOne" style="พื้นหลังสี: บานเย็น; ความกว้าง: 100px; ความสูง: 100px;" >
สวัสดีชาวโลก Js ของฉัน!
</div>
<div id="divTwo" style="พื้นหลังสี: อควา; ความกว้าง: 100px; ความสูง: 100px">
ยินดีต้อนรับสู่โลก Js ของฉัน!
</div>
<div id="divThree" style="สีพื้นหลัง: สีเทา; ความกว้าง: 100px; ความสูง: 100px">
นี่คือโลก Js ของฉัน!
</div>
</ร่างกาย>
</html>