HTML5 Drag and Drop (DnD): changing cursor

Question

While dragging an element over the browser client area in HTML5, how can I change the cursor to any cursor that I want?

So far, I've only been able to display the default cursor while dragging (except for the none cursor wherever dropping is not supported).

I'm not talking about any of the following:

• using event.dataTransfer.setDragImage() to display an image besides the cursor

• using event.dataTransfer.dropEffect to display a copy or a link symbol besides the cursor, or to change the cursor to the none symbol

• in Firefox, using event.dataTransfer.mozCursor, since that can only perform the default system behavior, or display the arrow cursor, neither of which helps (besides, I want cross browser support, though I'm primarily targeting Chrome)

I've tried many other tricks, including using CSS :hover and :focus, and many JavaSscript tricks, all to no avail.

Thanks for any help.

Answer 1

Here is a CSS only solution!

element:hover:active {
cursor: type;
}

Just put the element selector where element is and specify a cursor. This is a bit of a hack, because it does not detect dragging, only hover and click at the same time.