JSFiddle - React, Tailwind, and code Playground

HTML

<p></p>
<div id="myDiv"> <span id="Div1"></span>
 <span id="Div2"></span>
 <span id="Div3"></span>
 <span id="Div4"></span>

</div>

CSS

div {
     display: block;
     margin: 0 auto;
     overflow: hidden;
     width: 950px;
 }
 span {
     display: block;
     position: absolute;
     opacity: 0.5;
     border-radius: 999px;
     z-index: 1;
 }
 #Div1 {
     background-color: #FF0000;
     height: 200px;
     left: 50px;
     top: 80px;
     width: 200px;
 }
 #Div2 {
     background-color: #0000FF;
     height: 150px;
     left: 40px;
     top: 230px;
     width: 150px;
 }
 #Div3 {
     background-color: #008000;
     height: 250px;
     left: 100px;
     top: 190px;
     width: 250px;
 }
 #Div4 {
     background-color: #FFFF00;
     height: 100px;
     left: 200px;
     top: 130px;
     width: 100px;
 }
.is-over{
    background-color:black !important;
}

#myDiv{
    height:950px;
    width: 950px;
}
}

JavaScript

(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
            var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
            var offset = $current.offset();             
            result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

$(document).ready(function () {
    $("#myDiv").mousemove(
        function() {
            $("#myDiv").children("span").each(function(){
                if($(this).ismouseover())
                    $(this).addClass("is-over");
                else
                    $(this).removeClass("is-over");
            });
        });
    /*$("body").mousemove(
            function(){
                if(!$("#myDiv").ismouseover())
                    $("div span").removeClass("is-over");
            });*/
        
        
        
        
    });