JSFiddle - React, Tailwind, and code Playground

by jefferyto

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;
}
.ie #overlay {
    background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
    zoom: 1;
}

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', function(e) {
        return handler(e || window.event);
    });
} else {
    document.body.onmouseover = handler;
}

// yuck
if (/msie [\w.]+/.test(navigator.userAgent.toLowerCase())) {
    document.body.className += ' ie';
}

function inArray(arr, el) {
    var i = 0, l = arr.length;
    for ( ; i < l; i++) {
        if (arr[i] === el) {
            return true;
        }
    }
    return false;
}

function findPos(obj) {
    var pos = {};
    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) {
    var offset, width, height,
        target = e.target || e.srcElement;

    // defeat Safari bug
    if (target.nodeType === 3) {
        target = target.parentNode;
    }

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

    if (inArray(no, target)) {
        cur = null;
        overlay.style.display = 'none';
        return;
    }

    offset = findPos(target);
    width = target.offsetWidth;
    height = target.offsetHeight;

    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';
}