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);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0.3,startColorstr='#4c333333', endColorstr='#4c666666');
 z-index: 1000000;
    pointer-events:none;
        
}

JavaScript

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

if (document.body.addEventListener) {
    document.body.addEventListener('mouseover', handler, false);
  }
  else if (document.body.attachEvent) {
      document.body.attachEvent('onmouseover',handler);
  }
  else {
    document.body.onmouseover = handler;
  }


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) {
     e = e || window.event;
     var target = e.target || e.srcElement;

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

     if (navigator.appName !== 'Microsoft Internet Explorer')
     {
        if (~no.indexOf(target)) {
            cur = null;
            overlay.style.display='none';
            return;
        }
     }
     else
     {
         for(var i=0;i<no.length;i++)
         {
             if (target === no[i])
             {
                 cur = null;
                 overlay.style.display = 'none';
                 return;
             }
         }
     }

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

    cur = target;

     overlay.style.top=offset.top+"px";
     overlay.style.left=offset.left+"px";
     overlay.style.width=width+"px";
     overlay.style.height=height+"px";
     overlay.style.display='block';
     
    /*overlay.css({
        top: offset.top,
        left: offset.left,
        width: width,
        height: height
    }).show();
    */

}