问题展示

在开发拖拽排序时，如果给列表项设置一个悬停样式，就很容易出现下面这种问题：

可以看到，在把列表项拖走之后，对应的悬停样式居然还是停留在原地没有动。而期望的效果是这样的：

开始拖拽之后，悬停的效果消失或者跟随拖拽的元素。

如何解决？

给列表项包一层 div，然后在拖拽时使用 :after 给这个包裹元素追加一个下面这样的遮罩，注意：是给列表项外边套一层 div，给这个 div 设置遮罩，而不是直接给列表项设置遮罩：

.xxx:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

这样的话就相当于拖拽时我们是 hover 到了这个 after 伪元素上，原来元素的悬停效果就消失了。

解决方法的 demo 可以看这个：sortable-hover-bug-fix - CodeSandbox，使用 react + sortablejs，我就不贴代码了。

根本原因在于 chromium，下面是个类似的 bug 链接：

相同的场景在 firefox 里就是正常的，所以这不是你正在使用的拖拽库或你的代码有问题。