JSFiddle - React, Tailwind, and code Playground

HTML

<div class='under'></div>
<div class='over'></div>
<div class='pointer'><--------- the blue one is underneath the green one</div>
<br/><br/><br/><br/><br/><br/>

over green: <span id="green">N</span>
<br />
over blue: <span id="blue">N</span>

CSS

.over {
  display:inline-block;
  position:absolute;
  height:100px;
  width:100px;
  background: rgba(0, 255, 0, .3);
   pointer-events:none;
}

.under {
  display:inline-block;
  position:absolute;
  height:26px;
  width:26px;
  top:37px;
  left:37px;
  background:rgba(0, 0, 255, 1);
 
}

.pointer {
  position:absolute;
  top:40px;
  left:80px;
}

JavaScript

var over = $(".over");
var under = $(".under");
var green = $("#green");
var blue = $("#blue");

over.on("mouseover", function() { green.html("Y"); });
over.on("mouseout", function() { green.html("N"); });
under.on("mouseover", function() { blue.html("Y"); });
under.on("mouseout", function() { blue.html("N"); });