JSFiddle - React, Tailwind, and code Playground

by aslancods

HTML

<div class="wrap" id="wrap">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

CSS

.wrap {
    width: 302px;
    height: 302px;
    background-color: #ececec;
    position: relative;
    z-index:9999;
}
#div1 {
    width: 100px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #000;
    z-index: 2;
}
#div2 {
    width: 300px;
    height: 100px;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1px solid #000;
    z-index: 9;
}
.blue {
    background-color : blue;
}


.green {
    background-color : green;
}

JavaScript

$(document).ready(function () {
    var wrap = $('#wrap');
    var div1 = $('#div1');
    var div2 = $('#div2');

    var sameLoc = function (e) {

        var offset = wrap.offset();
        eX = e.pageX - offset.left;
        eY = e.pageY - offset.top;
        console.log(eX)
        console.log(eY)
        if (eX >= 0 && eY >= 0) {

            var d1Pos = div1.position();
            var d1H = div1.innerHeight();
            var d1W = div1.innerWidth();

            var d2Pos = div2.position();
            var d2H = div2.innerHeight();
            var d2W = div2.innerWidth();

            if (eX >= d1Pos.left && eX <= (d1Pos.left + d1W)) {
                if (eY >= d1Pos.top && eY <= (d1Pos.top + d1H)) {



                    if (eX >= d2Pos.left && eX <= (d2Pos.left + d2W)) {
                        if (eY >= d2Pos.top && eY <= (d2Pos.top + d2H)) {

                            div1.trigger('mouseover');
                            div2.trigger('mouseover');

                        } else {
                            div2.removeClass('green')
                        }
                    } else {
                        div2.removeClass('green')
                    }


                } else {
                   div1.removeClass('blue')
                }
            } else {
                div1.removeClass('blue')    
            }
        }

    }

    wrap.bind('mousemove', sameLoc);
    
    wrap.bind('mouseleave',function(){
        div1.removeClass('blue')
         div2.removeClass('green')
    });
    
    div1.bind('mouseover', function () {
        $(this).addClass('blue')
    });
    div1.bind('mouseleave', function () {
        $(this).removeClass('blue')
    });
    
    div2.bind('mouseover', function () {
        $(this).addClass('green')
    });
    div2.bind('mouseleave', function () {
        $(this).removeClass('green')
    });
    //div2.bind('mouseover');

});