: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

Answer 1

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

Answer 2

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