## 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
This still reproduces on Safari Tech Preview 8.
Mass move bugs into the DOM component.
Another bug which belongs to UI Events.
Still reproduces in Safari 14 and Chrome 88
This still reproduces in Chrome Version 99.0.4844.83
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?
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!