JSFiddle - React, Tailwind, and code Playground

by gfosco

HTML

<div id="front">Front</div>
<div id="back">Back</div>
<div id="log">Log:<BR/></div>

CSS

#front {
    z-index:10;
    border:1px solid black;
    padding:5px;
    height:100px;
    width:100px;
    position:absolute;
    left:60px;
    top:30px;
    background-color:#123456;
    color:white;
}

#back {
    z-index:0;
    border:1px solid black;
    padding:5px;
    height:100px;
    width:100px;
    position:absolute;
    left:10px;
    top:10px;
    background-color:#DDDDDD;
    color:black;
}

#log {
   position:absolute;
   top:145px;
   left:10px;
   border:1px solid black;
   width:300px;
   height:300px;
   padding:5px;
   background-color:#EEEEEE;
   color:black; 
}

JavaScript

var mouseX = 0;
var mouseY = 0;
var front = 0;
var back = 0;

function log(text) {
    $("#log").append(text + '<BR>');
}

function mouseWithin(selector) {
  var pos = $(selector).position();
  var top = pos.top;
  var left = pos.left;
  var height = $(selector).height();
  var width = $(selector).width();
    
  if (mouseX >= left && mouseY >= top && mouseX <= left + width && mouseY <= top + height) {
    return true;
  }
  return false;
}

$(document).bind('mousemove', function(e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
    if (front == 1 && !mouseWithin("#front")) {
            front = 0;
            log('Front Leave');
    }
    if (back == 1 && !mouseWithin("#back")) {
            back = 0;
            log('Back Leave');
    }    
    if (front === 0 && mouseWithin("#front")) {     
            front = 1;
            log('Front Hover');
    }
    if (back === 0 && mouseWithin("#back")) { 
            back = 1;
            log('Back Hover');
    }        
        
});