JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

<div class="d1">a</div>
<div class="d2">div</div>
<pre id="status">Current: NOT OVER from a</pre>

CSS

.d1 {
    height : 20px;
    width  : 40px;
    background: #080;
    display: inline-block;
}
.d2 {
    height : 100px;
    width  : 80px;
    background: #800;
    display: inline-block;
}

JavaScript

var mode = 0;
$(window).on("mousemove", function(e) {
    var cc = "";
    if (e.target.className === "d1") {
        mode = 1;   
    } else {
        cc = e.target.className;
        if (cc !== "d2" && mode) {
            var el = $(".d1"),
                d1 = {
                    x : el.offset().left,
                    y : el.offset().top,
                    w : el.width(),
                    h : el.height()
                },
                c = {
                    x  : e.pageX,
                    y  : e.pageY
                };
            if (c.x >= d1.x + d1.w && c.y >= d1.y && c.y <= d1.y + d1.h)
                mode = 2;
            else
                mode = 0;
        } else if (cc === "d2" && mode) {
            mode = 3;
        }
    }
    if (mode === 3)
        $("#status").html("Current: OVER from a: " + cc);
    else
        $("#status").html("Current: NOT OVER from a");
});