JSFiddle - React, Tailwind, and code Playground
HTML
<div id="box-with-shadow">
</div>
<div id="status">
</div>
CSS
body {
margin: 0;
padding: 0;
}
#box-with-shadow {
display: block;
width: 10px;
height: 10px;
box-shadow: 100px 130px #000, 90px 140px #000, 100px 140px #000, 110px 140px #000, 80px 150px #000, 90px 150px #000, 110px 150px #000, 120px 150px #000, 90px 160px #000, 100px 160px #000, 110px 160px #000, 100px 170px #000;
}
#status {
width: 100%;
height: 2em;
background: red;
}
JavaScript
var boxWidth = parseInt($("#box-with-shadow").css('width'), 10);
var boxHeight = parseInt($("#box-with-shadow").css('height'), 10);
var boxOffsetX = parseInt($("#box-with-shadow").css('margin-left'), 10);
var boxOffsetY = parseInt($("#box-with-shadow").css('margin-top'), 10);
var boxShadowString = $('#box-with-shadow').css('box-shadow');
var boxShadows = boxShadowString.split(/,(?![^\(]*\))/);
// key: x-pos of the shadow, value: concatenated y-positions divided by comma
var keyValuePairs = fillKeyValuePairs();
var cursorX;
var cursorY;
document.onmousemove = function(e) {
cursorX = e.pageX;
cursorY = e.pageY;
checkCursor();
}
function checkCursor() {
var shadowHovered = false;
for (i = cursorX - boxWidth; i <= cursorX && !shadowHovered; i++) {
if (keyValuePairs[i] != null) {
// At this point we know that somewhere on this x-position there is a shadow.
// Now check if there is an accosiated y-interval for the found x-position
for (j = cursorY - boxHeight; j <= cursorY; j++) {
if ((keyValuePairs[i] + "").split(",").indexOf((j + "")) != -1) {
shadowHovered = true;
break;
}
}
}
}
if (shadowHovered) {
$("#status").css("background", "green");
$("#status").text("Found shadow: xOffset = " + (i - 1) + "px, yOffset = " + j + "px");
} else {
$("#status").css("background", "red");
$("#status").text("");
}
}
function fillKeyValuePairs() {
var keyValuePairs = [];
for (index = 0; index < boxShadows.length; index++) {
var xPos = parseInt(boxShadows[index].trim().match(/[0-9]+px/g)[0], 10) + boxOffsetX;
var yPos = parseInt(boxShadows[index].trim().match(/[0-9]+px/g)[1], 10) + boxOffsetY;
keyValuePairs[xPos] = keyValuePairs[xPos] != null ? keyValuePairs[xPos] + "," + yPos : yPos;
}
return keyValuePairs;
}