清除卡住:悬停psuedoclass

Question

由于webkit错误(我认为),有一种情况,我有一个卡住的:hover伪造的类.你可以在这里看到:http://jsfiddle.net/zFk2V/3/

拖放后,前一个元素:hover在Chrome中保持状态.如果您将鼠标悬停在卡住的项目上,则悬停状态会清除.

我认为应该可以使用事件触发,DOM重排触发或其他一些shenaniganary来清除元素的悬停状态.

我试过了:

$('[draggable]').trigger('mouseenter')
$('[draggable]').trigger('mousemove')
$('[draggable]').trigger('mouseout')
$('[draggable]').trigger('mouseleave')
$('[draggable]').trigger('blur')
$('[draggable]').trigger('hover')

$('[draggable]').toggleClass('selected')
$('[draggable]').toggleClass('selected') // twice to reset to original

$('[draggable]').height(true) // should trigger a DOM reflow

......以及所有这些的不同组合,但没有成功

我甚至试过这个,我确信它会起作用,即使是不可接受的:

$('[draggable]').hide()
setTimeout(function(){
  $('[draggable]').show()
}, 10)

这也行不通.:(

在所有情况下,:hover国家仍然存在.如果是铬检查器和视觉效果,您可以验证这一点.

我很想知道是否存在针对此的错误,或者是否有其他人听说过它.我发现的只是另一个问题在谈论它,答案是一个大锤.

Answer 1

解决此错误的一种方法是使用 JSmouseenter和mouseleave事件来应用悬停状态，而不是 CSS:hover伪类：

CSS

.hover {
    background: #fc9;
}

JS

lis[i].addEventListener("mouseenter", function(event) {
    this.classList.add("hover");
}, false);
lis[i].addEventListener("mouseleave", function(event) {
    this.classList.remove("hover");
}, false);

并确保拖动开始时移除悬停效果：

lis[i].addEventListener("dragstart", function(event) {
    dragged = this;
    this.classList.remove("hover"); // <- Add this
    ol.classList.add("insistent");
}, false);

这是一个小提琴：

http://jsfiddle.net/36kBp/2/