奇怪的 react-dnd 行为（或拖放 HTML5？）

Question

当我将鼠标悬停在一个列表项上时，一种样式——box-shadow 的外观。然后，当移动该元素时，box-shadow 会获取落入其位置的元素，而光标不在该元素的区域（已占据其位置）。 谁遇到过这样的问题以及如何解决？ 演示：https://codesandbox.io/s/react-dnd-example-13-ve2mu

Answer 1

看起来问题来自.Card:hover。当您单击并拖动元素时，该元素的悬停仍然处于活动状态，并且它正在该位置创建未单击的元素以具有悬停效果（即框阴影）。

您可以通过添加以下内容来解决它：

.Card:active {
  box-shadow: unset;
}

这只是说当卡片处于活动状态（拖动）时，只需取消设置 box-shadow。