Chrome Drag & Drop triggering :hover pseudo-class on surrounding elements

Question

I'm running into very frustrating and unexpected drag and drop behavior in Chrome.

Problem:

The :hover pseudo-class is triggered and stuck on surrounding elements, particularly ones where the DragElement's ghost is overlapping it.

Steps to reproduce the issue:

• Example: http://plnkr.co/edit/PayXodHUtxqUZsM3T2ye then preview in Separate Window
• Click and drag any of the number boxes.
• Drop it any of the other boxes with its ghost slightly overlapping surrounding elements.

This happens in Chrome 35, 36, and 38-beta. I also noticed this isn't happening in Plunker's Run frame with the editor, but is happening in the full windowed view (linked above). It also happens in my node-webkit app (where I discovered this problem).

What I've tried so far:

• Using -webkit-user-drag: element; on .box
• Adding draggable="true" attribute on each .box element to see if there's a difference.
• event.stopPropagation on various elements, including window

Why would it be triggering :hover on the surrounding elements? It makes absolutely no sense. I'm about to rip my hair out! :/

Thanks in advance for anyone who is willing to help me solve this.

Answer 1

Have you considered jQuery UI? I know the less external resources the better, but jQuery UI detects when you are dragging, and then (as "The Reveller" said), you could add a class to body and specify

.bodyIsDragging{
   pointer-events: none
 }