鼠標(biāo)移到div,浮層顯示明細(xì),彈出層與div的上邊距左邊距重合(示例代碼)

2024-05-06 15:57:26

字體：大中小

供稿：網(wǎng)友

這篇文章主要介紹了鼠標(biāo)移到div,浮層顯示明細(xì),彈出層與div的上邊距左邊距重合的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

如下所示：

復(fù)制代碼代碼如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toopTip
        {
            background-color:Yellow;
            border-style:solid;
            border-width:1px;
            border-color:Red;
        }
    </style>
   <script language="javascript" type="text/javascript">
       /*
            如果希望提示的div的左邊界與上邊界與顯示的div重疊，那么需要?jiǎng)h除文檔頭W3C標(biāo)準(zhǔn)
            <!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;
               /*
                 無(wú)法用原始的div綁定鼠標(biāo)移走的事件,因?yàn)槊骷?xì)的div的寬度長(zhǎng)度都要大于原始div，
                 這樣原始的div就被覆蓋了，此時(shí)會(huì)自動(dòng)觸發(fā)onmouseout事件
               */
               //divArray[i].onmouseout = removeDivDetail;
           }
       }
       function createDivDetailOne() {
           //保證divDetail div的唯一性
           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);
           //此時(shí)用于明細(xì)的div已經(jīng)覆蓋了原div，所以覆蓋的div要進(jìn)行事件的處理
           document.getElementById("divDetail").onmouseout = function() {
               divObj = this;
               if (!divObj) {
                   return;
               }
               document.body.removeChild(divObj);
           };
       }
       function removeDivDetail() {
           var divObj = document.getElementById("divDetail");
           if (!divObj) {
               return;
           }
           document.body.removeChild(divObj);
       }

window.onload = initEvent;
</script>

</head>
<body>
    <div >
        Hello My Js World!
    </div>
    <div>
        Welcome to My Js World!
    </div>
    <div>
        THIS IS My Js World!
    </div>
</body>
</html>