JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

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

CSS

#wrap {
    background: #aa9;
    padding: 15px;
    margin: 5px;
}
.d1 {
    height : 20px;
    width  : 40px;
    background: #080;
    display: inline-block;
}
.d2 {
    height : 100px;
    width  : 80px;
    background: #800;
    display: inline-block;
    color : #fff;
    margin-left : 10px;
}

JavaScript

var mode = 0;
$(window).on("mousemove", function(e) {
    if (e.target.className === "d1") {
        mode = 1;   
    } else {
        var cc = e.target.className;
        if (cc !== "d2" && mode === 1) {
            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 === 2) {
            mode = 3;
            $(".d2").css("background", "#008");
        } else if (cc !== "d2" && mode === 3) {
            mode = 0;
            $(".d2").css("background", "#800");
        }
    }
    if (mode === 3)
        $("#status").html("Current: OVER from a: " + cc);
    else
        $("#status").html("Current: NOT OVER from a");
    
});