javascript - :hover 拖放到元素上

Question

我有简单的 ol-li 构造，并想在其中添加拖放操作。另外，我想以不同的颜色突出显示悬停项目和拖动项目。但这是 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. 这是更新的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;
}

旁注：我可能会在ollike中添加一个 idid='dragableList'并将该行更改var lis = document.querySelectorAll("li")为var lis = document.getElementById('dragableList').querySelectorAll("li")以防万一您稍后在项目中的某个位置有另一个列表。这是包含的 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');
  }
});