My web page (with vanilla Javascript) accepts files dropped on to it from the native desktop. I want to change the cursor's appearance while dragging, to give users feedback about the progress of their drag (when they're on the drop zone, etc). This is easy if you're dragging an HTML element from within the same page, but I haven't found how to do it when dragging a file or image from elsewhere on the desktop.
I have tried setting a class on the body element and all its descendants (and there are no other cursor styles anywhere) but as you can see from the attached edited screenshot it has no effect - the class and style are applied correctly (see debug tools view in the lower half of the image) but the cursor nevertheless takes its default appearance.
Relevant snippet of CSS:
no-drop-cursor, .no-drop-cursor * {
cursor: no-drop;
}
and Javascript applies the class to the body element whenever the cursor is on my web page but outside the drop zone.
Is this in fact impossible - or is there some neat way to make it happen?
A couple of things to avoid unnecessary suggestions:
All relevant drag/drop event handlers already do preventDefault();
The actual drag/drop code works just fine, exactly as intended;
I already give visual feedback to users by highlighting the drop zone appropriately as the cursor moves into and out of it, but I would also like the cursor's appearance to change.
Any ideas appreciated, even if it's only a clear explanation of why I can't do that!
