JSFiddle - React, Tailwind, and code Playground

Javascript element hover

by Amir Sharifian

HTML

<div class="div1 rp-cursor-add">
    <div class="div2 rp-cursor-add">
      <div class="div3 rp-cursor-add">
        <div class="div4 rp-cursor-add">
          <ul class="rp-cursor-add">
            <li class="rp-cursor-add">
              <rp-text class="rp-cursor-add">test</rp-text>
            </li>
            <li class="rp-cursor-add">
              <a href="#" class="rp-cursor-add">
                <rp-text class="rp-cursor-add">ali</rp-text>
              </a>
            </li>
            <li class="rp-cursor-add">
              <p class="rp-cursor-add">
                <rp-text class="rp-cursor-add">asdasd</rp-text>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="marker">
  </div>

CSS

div {
  padding: 10px;
}
ul {
  background: #ddd;
}
#marker {
  position: absolute;
  width: 0;
  height: 0;
  outline: 2px solid green;
}

JavaScript

/* window.onmouseover=function(e) {
  const elementInfo = {
    width: 0,
    height: 0,
    top: 0,
    left: 0
  };
  const element = e.target;
  const rect = element.getBoundingClientRect();
  elementInfo.width = element.offsetWidth;
  elementInfo.height = element.offsetHeight;
  elementInfo.top = rect.top;
  elementInfo.left = rect.left;
  console.log(elementInfo);
  const marker = document.getElementById("marker");
  marker.style.width = elementInfo.width+"px";
  marker.style.height = elementInfo.height+"px";
  marker.style.top = elementInfo.top+"px";
  marker.style.left = elementInfo.left+"px";
}; */

window.onload = function() {
      var bodyElement = document.getElementsByTagName("body")[0];
      bodyElement.onmouseover = bodyElement.onmouseout = handler;
      
      function handler(event) {
      	const element = e.target;
        const rect = element.getBoundingClientRect();
        const marker = document.getElementById("marker");
        
        if (event.type == 'mouseover') {
          marker.style.width = element.offsetWidth+"px";
          marker.style.height = element.offsetHeight+"px";
          marker.style.top = rect.top+"px";
          marker.style.left = rect.left+"px";
        }
        if (event.type == 'mouseout') {
          marker.style.width = 0;
          marker.style.height = 0;
          marker.style.top = 0;
          marker.style.left = 0;
        }
      }
    };