JSFiddle - React, Tailwind, and code Playground

by Gökhan Kurt

HTML

<img id="bear"...

CSS

#bear {
  width: 150px;
}

#bear.svgHover + #bearBox {
  background: green;
}

#bearBox {
  position: absolute;
  background: red;
}

JavaScript

bear.addEventListener("mousemove", function(ev) {
  var rect = bear.getBoundingClientRect();
  var relX = ev.clientX - rect.left;
  var relY = ev.clientY - rect.top;

  var canvas = bear.svgHoverCanvas;
  if (!canvas) {
    canvas = bear.svgHoverCanvas = document.createElement("canvas");
    canvas.width = bear.width;
    canvas.height = bear.height;
    var context = canvas.getContext('2d');
    context.drawImage(bear, 0, 0, bear.width, bear.height);
  }
  var context = canvas.getContext('2d');
  var data = context.getImageData(relX, relY, 1, 1);
  if (data.data[3] > 0) {
    bear.classList.add("svgHover");
  } else {
    bear.classList.remove("svgHover");
  }
});

bear.addEventListener("mouseout", function(ev) {
    bear.classList.remove("svgHover");
});