:hover sticks to element on drag and drop

Question

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

Answer 1

Use the mouseover and mouseout functions and add/remove a class called hovered instead of using CSS's :hover pseudo-class. Here is the updated jsFiddle

Javascript to add (inside for loop)

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

CSS

.hovered {
    background: #fc9;
}

Side note: Be careful not so select all li on your page when selecting the variable.

Answer 2

Here is how I solved it. I had to resort to a little bit of JS unfortunately.

My page has collapsed records that highlight on hover. Clicking the record will expand it and disable the highlighting. Clicking again will re-collapse and resume hovering:

$(document).on('click', ".container.clickable", function(e){
  var $this = $(this);
  $this.toggleClass('expandable');
  if ($this.hasClass('expandable')) {
    $this.on('mouseenter', function(){
      // workaround to stop a stuck :hover
      $this.addClass('hilitable');
      $this.off('mouseenter');
    })
  } else {
    $this.removeClass('hilitable');
  }
});