JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div id="outer">
    <div id="middle">
        <div id="inner">
        </div>
    </div>
</div>

CSS

#outer, #middle, #inner {
    border   : 1px solid #000;

    padding  : 100px;
    position : relative;
}

JavaScript

$('#inner').bind('mousemove', function(ev){
    var $this = $(this),
         tPos = $this.offset(),
     mousePos = {x: ev.pageX, y: ev.pageY};
    
    mousePos.x -= tPos.left + parseInt($this.css('paddingLeft')) + parseInt($this.css('borderLeftWidth'));
    mousePos.y -= tPos.top + parseInt($this.css('paddingTop')) + parseInt($this.css('borderTopWidth'));

    $this.text('x = ' + mousePos.x + ', y = ' + mousePos.y);
});