134555 [draggable]:hover 2014-07-02 13:28:20 -0700 :hover state sticks after a drag-and-drop 2026-03-03 14:35:22 -0800 1 1 1 Unclassified WebKit UI Events WebKit Nightly Build Mac OS X 10.11 NEW http://jsfiddle.net/zFk2V/3/ InRadar P2 Normal --- 1 NashvilEric webkit-unassigned a_protyasha ap asefkow benjamin bfulgham david enrica koivisto matiasnu rniwa thibault.clerc2 webkit-bug-importer webkit zarv1k oldest_to_newest 1020016 0 NashvilEric 2014-07-02 13:28:20 -0700 ## 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 1211898 1 rniwa 2016-07-17 20:45:57 -0700 This still reproduces on Safari Tech Preview 8. 1503347 2 lforschler 2019-02-06 09:19:15 -0800 Mass move bugs into the DOM component. 1503620 3 rniwa 2019-02-06 21:04:18 -0800 Another bug which belongs to UI Events. 1737732 4 asefkow 2021-03-09 13:15:07 -0800 Still reproduces in Safari 14 and Chrome 88 1853141 5 thibault.clerc2 2022-03-21 03:48:56 -0700 This still reproduces in Chrome Version 99.0.4844.83 2020579 6 david 2024-03-12 15:32:24 -0700 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? 2020729 7 david 2024-03-13 08:53:11 -0700 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! 2078167 8 david 2024-11-29 07:03:56 -0800 (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. 2186740 9 bfulgham 2026-03-03 14:35:05 -0800 It looks like Chrome and Firefox match behavior in the JS Fiddle test case. Safari still shows the hover state. 2186741 10 webkit-bug-importer 2026-03-03 14:35:22 -0800 <rdar://problem/171662494>