JSFiddle - React, Tailwind, and code Playground

by Yukulele

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<!doctype html>
<div id="div"></div>

CSS

#div{
    width:300px;
    height:200px;
    /*background:#444;*/
    position:absolute;
    top:100px;
    left:100px;
    color:white;
    text-align:center;
    line-height:200px;
    transform:rotate(30deg);
    transition:all .2s;
}
#div.top   {background:#226}
#div.left  {background:#622}
#div.right {background:#262}
#div.bottom{background:#626}
#div.hover {box-shadow:0 0 5px red;}
#div:not(.hover){background:#444};

JavaScript

jQuery(function($) {
    var div = $("#div");
    var data = div.offset();
    data.width = div.width();
    data.height = div.height();
    var classes = [
        'top',
        'left',
        'right',
        'bottom'
    ]
    div.mousemove(function(e) {
        
        /* dont works { */
        //var x = e.pageX - data.left;
        //var y = e.pageY - data.top;
        /* } */
        
        /* works { */
        var x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
        var y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY;
        /* } */
        
        //ratio
        var rx = x / data.width;
        var ry = y / data.height;
        //diagonal position
        var bl = rx < ry;       //  false/true
        var br = rx > (1 - ry); //  true\false
        var dir = classes[bl*1+br*2];
        div.html(dir);
        div.removeClass(classes.join(" ")).addClass(dir + " hover");
    }).mouseleave(function() {
        div.empty().removeClass("hover");
    });

});