Bug 134555 ([draggable]:hover)

Summary:	:hover state sticks after a drag-and-drop
Product:	WebKit	Reporter:	NashvilEric
Component:	UI Events	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	a_protyasha, ap, asefkow, benjamin, david, enrica, koivisto, matiasnu, rniwa, thibault.clerc2, webkit, zarv1k
Priority:	P2
Version:	WebKit Nightly Build
Hardware:	Mac
OS:	OS X 10.11
URL:	http://jsfiddle.net/zFk2V/3/

Description NashvilEric 2014-07-02 13:28:20 PDT

## 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

Comment 1 Ryosuke Niwa 2016-07-17 20:45:57 PDT

This still reproduces on Safari Tech Preview 8.

Comment 2 Lucas Forschler 2019-02-06 09:19:15 PST

Mass move bugs into the DOM component.

Comment 3 Ryosuke Niwa 2019-02-06 21:04:18 PST

Another bug which belongs to UI Events.

Comment 4 asefkow 2021-03-09 13:15:07 PST

Still reproduces in Safari 14 and Chrome 88

Comment 5 Thibault Clerc 2022-03-21 03:48:56 PDT

This still reproduces in Chrome Version 99.0.4844.83

Comment 6 Orangetronic 2024-03-12 15:32:24 PDT

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?

Comment 7 Orangetronic 2024-03-13 08:53:11 PDT

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!