كما هو موضح أدناه:
انسخ رمز الكود كما يلي:
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<العنوان></العنوان>
<نمط النوع = "نص/CSS">
.toopTip
{
لون الخلفية: أصفر؛
نمط الحدود: صلب؛
عرض الحدود: 1 بكسل؛
لون الحدود: أحمر؛
}
</نمط>
<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 الأصلي.
بهذه الطريقة، تتم تغطية القسم الأصلي، وسيتم تشغيل حدث onmouseout تلقائيًا.
*/
//divArray[i].onmouseout = RemoveDivDetail;
}
}
وظيفة createDivDetailOne() {
// تأكد من تفرد divDetail div
var divDetail = document.getElementById("divDetail");
إذا (تفاصيل القسم)
{
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 = this;
إذا (! divObj) {
يعود؛
}
document.body.removeChild(divObj);
};
}
وظيفة إزالةDivDetail() {
var divObj = document.getElementById("divDetail");
إذا (! divObj) {
يعود؛
}
document.body.removeChild(divObj);
}
window.onload = initEvent;
</script>
</الرأس>
<الجسم>
<div id = "divOne" style = "لون الخلفية: فوشيا؛ العرض: 100 بكسل؛ الارتفاع: 100 بكسل؛" >
مرحبًا بعالم JS الخاص بي!
</div>
<div id="divTwo" style="background-color: Aqua; العرض: 100px; الارتفاع: 100px">
مرحبًا بك في عالم Js الخاص بي!
</div>
<div id="divThree" style="background-color: Gray; العرض: 100px; الارتفاع: 100px">
هذا هو عالم Js الخاص بي!
</div>
</الجسم>
</html>