JSFiddle - React, Tailwind, and code Playground

HTML

<div class="over"></div>
<div class="under"></div>
<div class="pointer"><--- drag</div>
<br/><br/><br/><br/><br/><br/>

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

CSS

body {
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  -ms-user-select:none;
}

.over 
{
    display:none;
    position:absolute;
    height:100px;
    width:100px;
    background: rgba(0, 255, 0, .3);
    z-index:1;
    left:150px;
}

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

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

JavaScript

var $document = $(document);
var over = $(".over");
var under = $(".under");
var pointer = $(".pointer");
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"); });

under.on("mousedown", function() {
  pointer.html("     drag --->");
  over.css("display", "inline-block");
  $document.on("mousemove", function(e) {
    $document.on("mouseup", function() {
      $document.off("mousemove");
      $document.off("mouseout, mouseup");
    });
    under.css({
      left: e.clientX - 12,
      top:e.clientY - 12
    });
  });
});