Question

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

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

我认为应该可以使用事件触发，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状态仍然存在。如果是铬检查器和视觉效果，您可以验证这一点。

我很想知道是否有错误提交，或者是否有其他人听说过。我发现的只有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/

清除卡住：悬停伪类

1 个答案: