Bug 134555 ([draggable]:hover) - :hover state sticks after a drag-and-drop
Summary: :hover state sticks after a drag-and-drop
Status: NEW
Alias: [draggable]:hover
Product: WebKit
Classification: Unclassified
Component: UI Events (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
URL: http://jsfiddle.net/zFk2V/3/
Keywords:
Depends on:
Blocks:
 
Reported: 2014-07-02 13:28 PDT by NashvilEric
Modified: 2024-03-13 10:05 PDT (History)
12 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
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!