El mouse se mueve a Div, los detalles de la pantalla de la capa flotante y la distancia superior izquierda de la capa pop -up y el div es pesado (código de muestra)

Este artículo presenta principalmente el mouse al DIV, los detalles de visualización de la capa flotante y el código de ejemplo de la distancia superior izquierda de la capa pop -Up y el div. Los amigos que lo necesitan pueden venir como referencia, espero que sea útil para todos

como se muestra a continuación:

Código de copiaEl código es el siguiente:
<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”>
       /*
Si el límite izquierdo del DIV desea superponerse al DIV que muestra el límite superior, entonces debe eliminar el estándar W3C del encabezado del documento
            <!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;
               /*
El incidente que no se puede eliminar del mouse con el DIV original, porque la longitud de ancho del DIV detallado es mayor que el Div original,
Entonces el DIV original está cubierto, y el evento OnMouseOut se activará automáticamente en este momento
               */
               //divArray[i].onmouseout = removeDivDetail;
           }
       }
       function createDivDetailOne() {
// Garantizar la singularidad del 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);
// En este momento, el DIV utilizado para detalles ha cubierto el DIV original, por lo que el DIV cubierto debe ser procesado por el evento
           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 id=”divOne” style=”background-color: Fuchsia; width: 100px; height: 100px;” >
        Hello My Js World!
    </div>
    <div id=”divTwo” style=”background-color: Aqua; width: 100px; height: 100px”>
        Welcome to My Js World!
    </div>
    <div id=”divThree” style=”background-color: Gray; width: 100px; height: 100px”>
        THIS IS My Js World!
    </div>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *