JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    
    
    
    <title>javascript - highlight a DOM element on mouse over, like inspect does - Stack Overflow</title>
    <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">
    <link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">
    <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
    
    
    
    <link rel="stylesheet" type="text/css" href="http://cdn.sstatic.net/stackoverflow/all.css?v=95025236d097">
    
    <meta name="relativepagescore" content="0">
    <link rel="canonical" href="http://stackoverflow.com/questions/11010569/highlight-a-dom-element-on-mouse-over-like-inspect-does">
    <link rel="alternate" type="application/atom+xml" title="Feed for question 'highlight a DOM element on mouse over, like inspect does'" href="/feeds/question/11010569">
    <meta name="title" content="javascript - highlight a DOM element on mouse over, like inspect does - Stack Overflow">
    <link rel="image_src" href="http://sstatic.net/stackoverflow/img/apple-touch-icon.png">
    
</head>
<body class="question-page">
    <div id="overlay"></div>
    <noscript><div id="noscript-padding"></div></noscript>
    <div id="notify-container"></div>
    <div id="overlay-header"></div>
    <div id="custom-header"></div>
    <div class="container">
        <div id="header">
            <div id="portalLink">
                <a class="genu" href="http://stackexchange.com" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
            </div>
            <div id="topbar">
                <div id="hlinks">
                    <span id="hlinks-user">
                  <span class="profile-triangle">&#9662;</span><a href="/users/995876/esailija" class="profile-link">Esailija</a>&nbsp;<a href="/users/995876/esailija?tab=reputation"><span class="reputation-score" title="your...

CSS

#overlay {
 position: absolute;
background-color: rgba(0,0,0,0.5);
 z-index: 1000000;
    pointer-events:none;
        
}

JavaScript

var cur, overlay = document.getElementById("overlay"),
    no = [document.body, document.documentElement, document];

var ie = getInternetExplorerVersion() > 0;

if (ie)
{
  document.body.onmousemove = ep;
  document.body.onmouseover = clear;
}
else
{
if (document.body.addEventListener) {
    document.body.addEventListener('mouseover', handler, false);
  }
  else if (document.body.attachEvent) {
    document.body.attachEvent('mouseover', function(e) {
      return handler(e || window.event);
    });
  }
  else {
    document.body.onmouseover = handler;
  }
}

function clear(e)
{
   cur = null;
   overlay.style.display='none';
}

function ep(e)
{
    var ev = {target:document.elementFromPoint(e.clientX, e.clientY)};
    handler(ev);
}


function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}


function findPos(obj) {
      var pos = new Object();
      pos.left = pos.top = 0;        
      if (obj.offsetParent)  
      {
        do  
        {
          pos.left += obj.offsetLeft;
          pos.top += obj.offsetTop;
        } while (obj = obj.offsetParent);
      }
      return pos;
    } 

 function handler(e) {

    if (e.target === cur) {
        return;
    }

    if (~no.indexOf(e.target)) {
        cur = null;
        overlay.style.display='none';
        return;
    }

    var target = e.target,
        offset = findPos(target),
        width = target.offsetWidth;//target.outerWidth(),
        height = target.offsetHeight;//target.outerHeight();

    cur = e.target;

     overlay.style.top=offset.top+"px";
     overlay.style.left=offset.left+"px";
     overlay.style.width=width+"px";
    ...