清除卡住的 :hover 伪类

Question

由于 webkit 错误（我认为），有一种情况是我卡住了:hover psuedoclass。你可以在这里看到这个：http://jsfiddle.net/zFk2V/3/

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

我认为应该可以使用事件触发、DOM 回流触发或其他一些诡计来清除元素的悬停状态。

我试过了：

$('[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 状态都会持续存在。您可以通过 chrome 检查器和视觉效果来验证这一点。

我很想知道是否有为此提交的错误，或者是否有其他人听说过。我发现的只是this other question 在谈论它，而答案是大锤。

Answer 1

解决此错误的一种方法是使用 JS mouseenter 和 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/