JSFiddle - React, Tailwind, and code Playground

by stefano caravana

HTML

<div>

<div id="info1"><div id="info2">info</div></div>

<div class="target" id="inn1"></div>
<div class="target" id="inn2"></div>
<div class="target" id="inn3"></div>
<div class="target" id="inn4"></div>
    
</div>
<div id="log"></div>

CSS

div {
position:absolute;
float:left;
width:200px;
height:200px;
}

#inn1 {
position:relative;
width:100px;
height:100px;
background: blue;
}

#inn2 {
position:relative;
width:100px;
height:100px;
background:red;
}

#inn3 {
position:relative;
width:100px;
height:100px;
background:green;
}

#inn4 {
position:relative;
width:100px;
height:100px;
background:yellow;
}

#info1 {
position:absolute;
top:50px;
left:50px;
}

#info2 {
position:relative;
z-index:10;
width:100px;
height:100px;
box-sizing:border-box;
border: 1px solid black;
}
#log {
    top: 0px;
    left: 230px;
}

JavaScript

var currentTarget;
var getHovered = function(x, y){
    var target = null;
    $('.target').each(function(i, node){
        var minX = $(node).offset().left, minY = $(node).offset().top;
        var maxX = minX + $(node).width(), maxY = minY + $(node).height();
        if (minX <= x && x < maxX && minY <= y && y < maxY) {
            target = node;
            return false;
        }
    });
    return target;
};
$('.target').mouseover(function(e){
    currentTarget = e.target;
    $('#log').append('<p>'+e.target.id+'</p>');
});
$('#info2').mousemove(function(e){
    var newTarget = getHovered(e.pageX, e.pageY);
    if (newTarget !== currentTarget)
        $(newTarget).trigger('mouseover');
});