JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

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 overlay = document.getElementById("overlay"),
    current,
    handler;

// https://github.com/m-gagne/limit.js/blob/master/limit.js    
Function.prototype.throttle = function (milliseconds) {
    var baseFunction = this,
        lastEventTimestamp = null,
        limit = milliseconds;

    return function () {
        var self = this,
            args = arguments,
            now = Date.now();

        if (!lastEventTimestamp || now - lastEventTimestamp >= limit) {
            lastEventTimestamp = now;
            baseFunction.apply(self, args);
        }
    };
};


function handleMousemove(e) {
    var elem,
        overlayState = overlay.style.display,
        x = e.clientX,
        y = e.clientY;

    overlay.style.display = 'none';
    elem = document.elementFromPoint(x, y);
    
    if (elem !== current) {
        hiliteElement(elem);
    } else {
        overlay.style.display = overlayState;
    }
}

function findPos(obj) {
    var pos = {
        left: 0,
        top: 0
    };

    if (obj.offsetParent) {
        do  {
            pos.left += obj.offsetLeft;
            pos.top += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    
    return pos;
}

function hiliteElement(elem) {
    if (!elem || elem == document.body || elem == document.documentElement || elem == document) {
        overlay.style.display = 'none';
        current = null;
        return;
    }
    
    var offset = findPos(elem),
        width = elem.offsetWidth,
        height = elem.offsetHeight;
        
    current = elem;
    overlay.style.display = 'block';
    overlay.style.width = width + "px";
    overlay.style.height = height + "px";
    overlay.style.top = offset.top + "px";
    overlay.style.left = offset.left + "px";
}

handler = handleMousemove.throttle(200);

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