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.

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