JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<div id="wrap">
    <div id="back"></div>
    <div id="front"></div>
</div>

<span></span>

CSS

div { position:absolute; }

#wrap { width:100%; height:100%; top:0; left:0; }

#front {
    background:rgba(0,255,128,0.6); z-index:100;
    width:80%; height:80%; top:10%; left:10%;
}

#back  {
    background:white; z-index:99;
     width:80%; height:80%; top:10%; left:10%; 
}

JavaScript

var $front = $("#front"), $back = $("#back"), $log = $("span");

$back.hover(function(){
    $back.css({background:"black"});	
},function(e){
	$back.css({background:"white"});
    $log.empty();
}).mousemove(function(e){
	var o = $back.offset();
	var x = e.pageX - o.left;
	var y = e.pageY - o.top;
    $log.html(x+";"+y);
});

$front.on("mouseenter mouseleave mousemove",function(e){
    $back.trigger(e);
});

/*$front.hover(function(e){
	$back.trigger("mouseenter");
},function(e){
	$back.trigger("mouseleave");
}).mousemove(function(e){
	$back.trigger(e);
});*/