Bug 134555 – :hover state sticks after a drag-and-drop

• Status: NEW
• Component: UI Events

## Overview

If you drag and drop to reorder a [draggable] element that also has a :hover psuedoclass, the hover state sticks to the dom element in the previous location.

Here is a fiddle of the issue:
http://jsfiddle.net/zFk2V/3/

I have verified this on Chrome 35.0.1916.153 and Safari 7.0.2 (9537.74.9).

## Steps to Reproduce

1. Drag an element
2. Notice that the hover state sticks to the previous element (both in visual effect and as revealed by the developer inspection tools)
3. hover and mouse away from the element and note that the hover state goes away

## Actual Results

The hover state persists, and dev tools show the element in `:hover` mode.

## Expected Results

No hover state should be present, or it should be cleared whenever any other element is hovered.

## Builds

My Chrome webkit version is 537.36.
There is a Stack Overflow issue about this from July 30th 2013, so this issues has been in the wild for a while I think.
http://stackoverflow.com/questions/17946886/hover-sticks-to-element-on-drag-and-drop

[Ryosuke Niwa]

This still reproduces on Safari Tech Preview 8.

[Lucas Forschler]

Mass move bugs into the DOM component.

[Ryosuke Niwa]

Another bug which belongs to UI Events.

Still reproduces in Safari 14 and Chrome 88

[Thibault Clerc]

This still reproduces in Chrome Version 99.0.4844.83

[Orangetronic]

I'm still seeing this in Safari Version 17.3.1

If i run `document.querySelectorAll(":hover")` i can get an ElementList with a whole pile of things that are very much not under the mouse. 

Is there a workaround in the meantime to manually flush the contents of the `:hover` pseudo-selector after an onDrop event?

[Orangetronic]

Anybody else who lands here looking for a work around, i've found this works:

```
for (const child of document.body.children) { document.body.replaceChild(child, child) }
```

hope that saves somebody a bit of headache!

[Orangetronic]

(In reply to Orangetronic from comment #7)
> Anybody else who lands here looking for a work around, i've found this works:
> 
> ```
> for (const child of document.body.children) {
> document.body.replaceChild(child, child) }
> ```
> 
> hope that saves somebody a bit of headache!

Lol this no longer works as a mitigation in latest Chrome (131.0.6778.86) & Safari (18.x)

I'm not having to work around this using a more targeted class name shuffle in my drag-end event to suppress hover styles etc until the user next moves the mouse. 

It looks like styles are getting computed against the mouse position from the start of the drag/drop event post-drop.