JSFiddle - React, Tailwind, and code Playground

by hunter

HTML

<body>
    <div id="box1" style="background:#e0e0e0;"></div>
    <div id="box2" style="background:#000000;margin-top:-60px;"></div>
    <div id="box3" style="background:blue;margin-top: -70px;"></div>
    <div id="box4" style="background:red;margin-top: -80px;"></div>
    <label></label>
<span></span>
<ul></ul>
</body>

CSS

ul { float: right; }

div { height: 100px; width: 100px; }

JavaScript

$("body").mousemove(function(e) {

    $("ul").html("");
    $("span").html("x:=" + e.pageX + ",y:=" + e.pageY);
    var $elements = GetAllElementsAt(e.pageX, e.pageY);

    $("label").html("Found:=" + $elements.length + "<br />");
    $elements.each(function() {
        var html = $("label").html() + $(this)[0].id + "<br />";
        $("label").html(html);
    });
});

function GetAllElementsAt(x, y) {
    var $elements = $("body *").map(function() {
        var $this = $(this);
        var offset = $this.offset();
        var l = offset.left;
        var t = offset.top;
        var h = $this.height();
        var w = $this.width();

        var maxx = l + w;
        var maxy = t + h;

        $("ul").append("<li>" + $this[0].id + " (" + $this[0].tagName + ")" + " [l:=" + l + ",t:=" + t + ",h:=" + h + ",w:=" + w + ",maxx:=" + maxx + ",maxy:=" + maxy + "]</li>");

        return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
    });

    return $elements;
}