JSFiddle - React, Tailwind, and code Playground
HTML
<div class="thingThatCouldBeOnTop"></div>
<div class="thingThatCouldBeUnderneath"></div>
CSS
div{
position:absolute;
}
.thingThatCouldBeOnTop{
width:100px;
height:100px;
background-color:#888;
z-index:2;
}
.thingThatCouldBeUnderneath{
width:130px;
height:100px;
background-color:#ccc;
z-index:1;
}
JavaScript
$('.thingThatCouldBeOnTop').mouseenter(function(e){
$('.thingThatCouldBeUnderneath').filter(function(){
$this = $(this);
var offset = $this.offset();
var height = $this.outerHeight();
var width = $this.outerWidth();
return offset.top < e.pageY
&& offset.left < e.pageX
&& (height + offset.top) > e.pageY
&& (width + offset.left) > e.pageX;
}).mouseenter();
});
$('.thingThatCouldBeUnderneath').mouseenter(function(){
console.log('blarg');
});