JSFiddle - React, Tailwind, and code Playground

by Vincent

HTML

<div class="wrapper">
  <h1>Document Element Selector</h1>
  <p>Choose any block element from the site below</p>
  <ul>
    <li>Teset List Item 1</li>
    <li>Teset List Item 2</li>
    <li>Teset List Item 3</li>
    <li>Teset List Item 4</li>
  </ul>
</div>

CSS

html { font-size: 14pt; }
body { margin: 1rem; }
.wrapper { margin: 0 auto; max-width: 40rem; }
iframe { width: 100%; height: 20rem; }

JavaScript

(function(window, document) {
  "use strict";

  var elemR = document.createElement("div");
  document.documentElement.appendChild(elemR);
  elemR.style.position = "absolute";
  elemR.style.background = "rgba(127,127,127,0.5)";
  elemR.style.pointerEvents = "none";

  function mouseOver(evt) {
    var elem = (evt.target) ? evt.target : evt.srcElement;
    if (elem.nodeType !== 1) { return; }
    if (elem === elemR) { return; }
    var bounds = elem.getBoundingClientRect(elem);

    elemR.style.left = (window.scrollX + bounds.left).toFixed(0) + "px";
    elemR.style.top = (window.scrollY + bounds.top).toFixed(0) + "px";
    elemR.style.width = bounds.width.toFixed(0) + "px";
    elemR.style.height = bounds.height.toFixed(0) + "px";
  }

  document.documentElement.addEventListener("mouseover", mouseOver, false);

})(window, document);