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];

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 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";
     overlay.style.height=height+"px";
     overlay.style.display='block';
     
     alert( e.target.innerHTML );
     
    /*overlay.css({
        top: offset.top,
        left: offset.left,
        width: width,
        height: height
    }).show();
    */

}