2 ms·
Is there an HTML5 "make my cursor be good" library? Because when I do stuff like this, it looks so appealing to just declare a cursor in a CSS rule. Then HTML5
by jancsika 6y ago
Is there an HTML5 "make my cursor be good" library?
Because when I do stuff like this, it looks so appealing to just declare a cursor in a CSS rule. Then HTML5 is all like:
* ha ha. There's a default set somewhere else in the DOM that's overriding your cursor (as in the author's website where the titlebar triggers the text edition cursor).
* ha ha. I'll show your desired cursor for the DOM element, but when you drag the element with the mouse I'm going to flicker every time the mouse beats Javascript to a location that lies outside that element's bbox.
Especially when making a UI to drag SVG rects, this gets annoying. I doubt there's a pseudo class for "this thing I am dragging right now using a mousemove event listener," but maybe I'm wrong.
- jaflo 6y agoThe approach I have seen is to apply the cursor you want to the entire body using JS so even if your cursor momentarily escapes the element the wanted cursor is shown. You just need to make sure to revert back to the default cursor when the users stops dragging or the window loses focus.
- jancsika 6y agoThanks, jaflo. I use the JS body approach, but I was hoping I was missing a declarative option. Even JS has the PointerEvent so that you can encapsulate behaviors like dragging inside a single DOM element without having to set state for a parent element like body. I was hoping CSS had something analogous (though I can't currently think of how it would work).