:hover 拖放到元素上

I have simple ol-li construction and want to add drag'n'drop to it. Additionaly I want to highlight hover item and dragover item in different colors. But it is an unusual bug in WebKit.

1. Capture last item.
2. Drag it to the top.
3. Drop it to the first item.

And last element capture the hover pseudoclass! Why? How can I prevent it?

This is an example:

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

解决方案

You can simply add an .onmouseover and an .onmouseout function and add/remove a class called hovered instead of using CSS's :hover. Here is the updated jsFiddle

Javascript to add (inside for loop)

lis[i].onmouseover = function() {
    // Adds the 'hovered' class
    this.className = this.className + " hovered";
}
lis[i].onmouseout = function() {
    // Removes the 'hovered' class
    this.className = this.className.split(' ').filter(function(v) {
        return v!='hovered'
    }).join(' ');
}

CSS

.hovered {
    background: #fc9;
}

Side note: I might add an id to the ol like id='dragableList' and change the line var lis = document.querySelectorAll("li") to var lis = document.getElementById('dragableList').querySelectorAll("li") just in case you have another list somewhere in your project later on. Here is the jsFiddle with that included