Clear a stuck :hover psuedoclass

Question

Because of a webkit bug (I think) there is a situation where I have a stuck :hover psuedoclass. You can see this here: http://jsfiddle.net/zFk2V/3/

After a drag-and-drop, the previous element stays in :hover state in Chrome. The hover state clears if you hover and mouse away on the stuck item.

I think it should be possible to clear the hover state of elements using event triggering, DOM reflow triggering, or some other shenaniganary.

I have tried:

$('[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

...and different combinations of all of these, with no success

I even tried this, which I was sure would work even though unacceptable:

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

This does not work, either. :(

In all cases, the :hover state persists. You can verify this if the chrome inspector and by the visual effect.

I'd love to know if there's a bug filed for this, or if anyone else has heard of it. All I've found is this other question talking about it, and that answer is a sledgehammer.

Answer 1

One way around this bug is to use JS mouseenter and mouseleave events to apply the hover state instead of the CSS :hover pseudo class:

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

And to ensure that the hover effect is removed when the drag starts:

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

Here is a fiddle:

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