奇怪的react-dnd行为(或者拖放HTML5?)

Question

当我将鼠标悬停在列表项上时，会出现一个样式--方框阴影的外观。然后，当移动该元素时，box-shadow获取落入其位置的元素，而光标不在该元素的区域(已取代其位置)。谁遇到了这样的问题，如何解决？演示：https://codesandbox.io/s/react-dnd-example-13-ve2mu

Answer 1

看起来问题来自.Card:hover。当您单击并拖动某个元素时，该元素的悬停仍处于活动状态，并且它会在该位置创建未单击的元素以产生悬停效果(即框阴影)。

您可以通过添加以下内容来解决此问题：

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

这就是说，当卡片处于活动状态(拖动)时，只需取消设置框阴影即可。