将鼠标悬停在框阴影上并更改特定框阴影的颜色

Question

基本上我有一个带有逗号分隔的盒阴影列表的div，就像在附加的代码片段中一样，我需要更改个别＆＃34;阴影块的颜色＆＃34;当它盘旋时。

我搜索了如何查明特定渲染的CSS属性是否悬停的方法，但我找到的唯一有用的东西是how to detect if the border of a cell is hovered上的类似问题。答案似乎很清楚：你有悬停的单元格的位置和它的边界宽度，所以检查四个不同方向的偏移量。我无法将此原则转移到（逗号分隔的）box-shadow属性。

请注意，我不想在Javascript中复制框阴影的位置。如果我改变CSS中各个阴影的位置，解决方案仍然可以工作。如果需要，您可以假设div的宽度和高度不会改变。对此有任何聪明的想法？奖励任务将为悬停的阴影块着色，如上图所示，但如果任何盒阴影悬停，则将消息记录到控制台的解决方案已经是一个有用的步骤。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="box-with-shadow">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如marekful正确指出的那样，实现所需效果的最简单方法是使用元素而不是多个阴影。但是，我将使用一个简单的解决方案回答这个问题，该解决方案适用于所描述的设置和可变的盒阴影。它不足以解决一些特殊情况，例如div的旋转。

想法是在开始时计算阴影的位置（假设没有任何移动或改变，否则我们必须多次重新计算位置）。在鼠标移动时，我检查鼠标的位置是否在任何间隔中，这些间隔由阴影的位置加上其尺寸定义。

我使用Javascript已经有一段时间了，所以有些部分可能会被简化，但至少它可行。随意使用JSFiddle。

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;
}

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="box-with-shadow">
</div>

<div id="status">
</div>