JSFiddle - React, Tailwind, and code Playground

HTML

<img id="hand"...

CSS

body
{
margin:0;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gESFSEJzD6thwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABaSURBVGje7dgxEcBACEVBLpbw7wA0cQbS0iT7DDA7v+NU1cRymbl9Ip74SCAgICAgICAgICAgICAgICAgv4KcmVl/0HW3RUBAQEBAQEBAQEBAQEBAQEBAQF66UuYKwuZmrIgAAAAASUVORK5CYII=);
}

JavaScript

var img = document.getElementById('hand');
var canvas = document.createElement("canvas");

canvas.width = img.width;
canvas.height = img.height;

var context = canvas.getContext("2d");

context.drawImage(img, 0, 0);

data = context.getImageData(0, 0, img.width, img.height);

img.onmousemove = change_cursor;

function change_cursor(e)
{
    var alpha = data.data[(e.y * img.width + e.x) * 4 + 3];
    console.log(alpha);
    if (alpha) {
        img.style.cursor = 'pointer';
    }
    else {
        img.style.cursor = 'default';
    }
}