javascript - :hover sticks to element on drag and drop

Question

我有简单的 ol-li 结构，想添加拖放功能。此外，我想突出显示不同颜色的悬停项和拖动项。但这是 WebKit 中的一个不寻常的错误。

1. 捕获最后一项。
2. 将它拖到顶部。
3. 将其拖放到第一项。

最后一个元素捕获了 hover 伪类!为什么？我该如何预防？

这是一个例子:

http://jsfiddle.net/zFk2V/3/

var lis = document.querySelectorAll("li"),
    ol = document.querySelector("ol"),
    dragged = false,
    dragover = false;
ol.addEventListener("drop", function(event) {
    ol.insertBefore(dragged,dragover);
    this.classList.remove("insistent");
}, false);
for (var i=0, n = lis.length; i < n; i++) {
    lis[i].addEventListener("dragstart", function(event) {
        dragged = this;
        ol.classList.add("insistent");
    }, false);
    lis[i].addEventListener("dragover", function(event) {
        if (dragover) {
            dragover.classList.remove("dragover");
        }
        event.preventDefault();
        dragover = this;
        this.classList.add("dragover");
    }, false);
}

Answer 1

使用 mouseover 和 mouseout 函数并添加/删除一个名为 hovered 的类，而不是使用 CSS 的 :hover 伪类。这是 updated jsFiddle

要添加的 Javascript(在 for 循环内)

li.addEventListener("mouseover", () => {
  li.classList.add("hovered");
});
li.addEventListener("mouseout", () => {
  li.classList.remove("hovered");
});

CSS

.hovered {
    background: #fc9;
}

旁注:注意不要在选择变量时选择页面上的所有 li。