Javascript ：鼠标悬停在拖放时粘住图元

我有一个简单的ol-li结构，并想添加拖放到它。另外，我想用不同的颜色突出显示悬停项目和dragover项目。但这在WebKit中是一个不寻常的bug

捕获最后一项

将其拖到顶部

把它放到第一项

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

这是一个例子：

var lis=document.querySelectorAll（“li”），
ol=文档查询选择器（“ol”），
拖动=假，
dragover=false；
ol.addEventListener（“删除”，函数（事件）{
ol.插入前（拖动、拖动）；
此.classList.remove（“坚持”）；
}，假）；
对于（变量i=0，n=lis.length；i

您只需添加

.onmouseover

和

.onmouseout

函数，并添加/删除名为

hover

的类，而不用CSS的

：hover

。这是你的电话号码

要添加的Javascript（内部for循环）

CSS

---

旁注：我可能会向

ol

添加一个id，比如

id='dragableList'

，并将行

var lis=document.queryselectoral（“li”）

更改为

var lis=document.getElementById（'dragableList'）.queryselectoral（“li”）

，以防以后在项目中有其他列表。是包含的JSFIDLE

以下是我如何解决它的。不幸的是，我不得不求助于一点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');
  }
});

---

您在哪个浏览器中看到了这一点？JSFIDLE对我来说并没有中断。我在edge chrome（35.0.1916.153）上也有同样的问题。这很烦人，一定是个bug。我不满意用JS来做悬停状态，我认为还有一个更外科手术的解决方案。这个解决方案可能与用JS行为取代css悬停行为的解决方案重复，我尝试了很多方法让浏览器注意到鼠标实际上没有悬停任何元素，包括触发

mouseleave

和其他事件，读取元素高度以触发回流，以及切换应具有视觉效果的类。这是一个webkit错误，对吗？一年后，这怎么仍然存在？@SimpleAsCouldBe我很好奇为什么你仅仅因为使用javascript就拒绝一个可行的解决方案。。。一个bug就是一个bug，很多bug都会被忽略。我预计绑定到

mouseover

，

mouseout

，并修改每个列表项的类结构会导致性能下降。我的应用程序有几种类型的列表，它们共享一些行为。应用程序中大多数类型的列表项都会对css悬停做出反应，有些可以单击选择，有些则是

[draggable]

<代码>：悬停效果很好，可能是最快的，并且不需要清理事件。对我来说，刷新错误的

：hover

比全局覆盖css行为w/js要好得多。@SimpleAsCouldBe我只是引用了一个事实，即没有css方法。因此，js方式总比没有好。更改类名实际上对性能影响不大我遇到过浏览器错误（FF 50.0.0左右的自定义SVG边框模糊），但我强烈建议不要在网站中修补内容：浏览器的错误必须在浏览器中解决。向他们报告错误并让他们为每个人修复它更有效。

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

.hovered {
    background: #fc9;
}

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