清除卡住的:hover伪类

Question

清除卡住的:hover伪类

jquerycsshtmlwebkit

6

由于webkit的一个bug（我认为是这个原因），会出现一个卡住的:hover伪类状态。你可以在这里看到： http://jsfiddle.net/zFk2V/3/

在拖放之后，先前的元素在Chrome中仍处于:hover状态。如果您将鼠标悬停在这个卡住的项目上并移开鼠标，则:hover状态会被清除。

我认为应该可以使用事件触发、DOM回流触发或其他一些手段来清除元素的:hover状态。

我尝试过：

$('[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检查器和视觉效果来验证这一点。

我很想知道是否有人提交了这个bug，或者是否有人听说过它。我找到的只有这个问题，并且那个答案是一个大锤。

- SimplGy

我将此添加为 Webkit 的 bug：https://bugs.webkit.org/show_bug.cgi?id=134555。不过，仍然希望有解决卡住的 :hover 的方法 :) - SimplGy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Nicol · Accepted Answer

解决这个bug的一种方法是使用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);

这是一个 JSFiddle：

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