6

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.

Community
  • 1
  • 1
SimplGy
  • 20,079
  • 15
  • 107
  • 144
  • I added this as a webkit bug: https://bugs.webkit.org/show_bug.cgi?id=134555. Would love a solution to clear the stuck :hover still though :) – SimplGy Jul 02 '14 at 20:30

1 Answers1

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/

Jonathan Nicol
  • 3,158
  • 1
  • 21
  • 22
  • That'll work of course, but I have concerns about it--Same answer as here and same concerns: http://stackoverflow.com/a/17953595/111243. Can you confirm this stuck hover thing is really a bug? You've seen it/had problems with it in the past? – SimplGy Jul 02 '14 at 22:04
  • 1
    I'm not sure if it's a bug or an intended behavior. It certainly feels like a bug. I encountered it last week, when animating an element that was hovered. As in your case, when the element moved out from under the cursor Chrome didn't remove the :hover. In my case I could solve it by changing my click event to a mousedown event, and retain the :hover pseudo class. In your case I don't think that solution is applicable. My 2 cents: I wouldn't get hung up on using JS as a workaround. I imagine it's preferable to having hover events that are never removed? – Jonathan Nicol Jul 02 '14 at 22:53
  • FYI here is the Stack Overflow question that solved my :hover issue: http://stackoverflow.com/questions/10321275/hover-state-is-sticky-after-element-is-moved-out-from-under-the-mouse-in-all-br – Jonathan Nicol Jul 02 '14 at 22:55