: Najedź myszą na element na przeciągnij i upuść

Question

Mam prostą konstrukcję olii i chcę dodać do niej drag'n'drop. Dodatkowo chcę podświetlić element pozycji i dragover w różnych kolorach. Jest to jednak nietypowy błąd w WebKit.

1. Zrób ostatni przedmiot.
2. Przeciągnij do góry.
3. Upuść go do pierwszego elementu.

I ostatni element przechwytuje pseudoklaskę Hover! Czemu? Jak mogę temu zapobiec?

To jest przykład:

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

Można po prostu dodać i funkcję .onmouseover.onmouseout i dodaj/usuń klasę o nazwie hovered zamiast używać CSS na :hover. Oto updated jsFiddle

Javascript by dodać (wewnątrz pętli for)

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 nocie

.hovered { 
    background: #fc9; 
} 

Side: dodam id do ol jak id='dragableList' i zmienić linię var lis = document.querySelectorAll("li") do var lis = document.getElementById('dragableList').querySelectorAll("li") na wszelki wypadek, jeśli później będziesz miał inną listę w swoim projekcie. Here to jsFiddle z dołączonym

Answer 2

Oto jak to rozwiązałem. Musiałem uciekać się do odrobiny JS niestety.

Moja strona zawiera zwinięte rekordy, które wyróżniają się po najechaniu myszą. Kliknięcie rekordu spowoduje jego rozwinięcie i wyłączenie podświetlania. Ponowne kliknięcie spowoduje ponowne zwijanie i wznawianie zawieszania:

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