：悬停在元素上拖放

Question

我有简单的ol-li结构，并且想要添加drag'n'drop到它。另外我想突出悬停项目和dragover项目在不同的颜色。但这是WebKit中一个不寻常的错误。

1. 捕获最后一个项目。
2. 将其拖动到顶部。
3. 将它放到第一个项目。

而最后一个元素捕捉悬停伪类！为什么？我怎样才能防止它？

这是一个例子：

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

您可以简单地添加一个.onmouseover和.onmouseout功能，并添加/删除一个名为hovered而不是使用CSS的:hover类。这里是updated jsFiddle

Javascript功能来添加（在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

.hovered { 
    background: #fc9; 
} 

附注：我想补充一个ID，ol像id='dragableList'和改线var lis = document.querySelectorAll("li")到var lis = document.getElementById('dragableList').querySelectorAll("li")以防万一你在你的项目中的某个地方有其他列表。 Here是与该的jsfiddle包括

Answer 2

这是我如何解决它。不幸的是，我不得不求助于一点JS。

我的页面已经崩溃，突出悬停记录。点击记录将展开它并禁用突出显示。再次点击将重新合拢并恢复悬停：

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