：懸停在元素上拖放

我有簡單的ol-li結構，並且想要添加drag'n'drop到它。另外我想突出懸停項目和dragover項目在不同的顏色。但這是WebKit中一個不尋常的錯誤。：懸停在元素上拖放

捕獲最後一個項目。
將其拖動到頂部。
將它放到第一個項目。

而最後一個元素捕捉懸停僞類！爲什麼？我怎樣才能防止它？

Hover bug

這是一個例子：

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

來源

2013-07-30 isqua

什麼瀏覽器，你在具體看到？ jsfiddle不會爲我打破。 – TimHayes

我有邊緣鉻（35.0.1916.153）相同的問題。這很煩人，而且必須是一個錯誤。我不滿意使用JS做懸停狀態，我認爲有更多的手術方案。 – SimplGy

您可以簡單地添加一個.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包括

來源

2013-07-30 17:32:17

抵制這種解決方案剛剛替換JS行爲CSS懸停行爲，我試過很多東西，讓瀏覽器發現鼠標實際上並沒有任何徘徊元素，包括觸發'mouseleave'和其他活動，閱讀元素的高度觸發迴流，並切換一個應該具有視覺效果的類。這是一個webkit的bug，對吧？一年後這仍然如何？ – SimplGy

@SimpleAsCouldBe我很好奇，爲什麼你反抗，只是因爲它使用JavaScript一個有效的解決方案......一個錯誤是一個錯誤，很多人忽略 –

我期待着一個性能缺點與結合'mouseover'，'mouseout'和修改類每個列表項的結構。我的應用程序有幾種類型的列表共享一些行爲。應用程序中的大部分類型的列表項對CSS懸停有反應，有些可以點擊選擇，有些則是[可拖動]。 '：hover'效果很好，可能是最快的，並且不需要事件清理。對我來說，清除錯誤的'：hover'會比覆蓋全局的css行爲w/js好得多。 – SimplGy

這是我如何解決它。不幸的是，我不得不求助於一點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'); 
    } 
});

來源

2015-05-17 09:13:57 Dex

我遇到過瀏覽器bug（FF 50.0.0左右的模糊自定義SVG邊框），但我極力不建議修補網站中的東西：瀏覽器的bug必須在瀏覽器中解決。向他們報告錯誤並讓他們爲每個人修復它更有效。 – Xenos

：懸停在元素上拖放

回答

相關問題