javascript - 对鼠标悬停在框阴影上使用react并更改该特定框阴影的颜色

Question

基本上我有一个带有逗号分隔的框阴影列表的 div，就像在附加的代码片段中一样，我需要在悬停它时更改单个“阴影 block ”的颜色。

我搜索了如何确定特定呈现的 CSS 属性是否悬停的方法，但我发现的唯一有用的东西是关于 how to detect if the border of a cell is hovered 的类似问题。 .这里的答案似乎很清楚:你有悬停单元格的位置和它的边框宽度，所以检查四个不同方向的偏移量。我无法将此原则转移到(逗号分隔的)box-shadow 属性。

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

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

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

Answer 1

正如 marekful 正确指出的那样达到预期效果的最简单方法是使用多个 HTML 元素而不是多个阴影。但是，我将使用适用于所描述设置和可变框阴影的简单解决方案来回答这个问题。它不够健壮，无法解决一些特殊情况，例如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, separated by commas
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 associated 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>