In-place CSS cursor changes

As part of a feature I’m working on for Marked, I wanted to have the mouse cursor change while the Command key is held down. Using JavaScript to set the CSS for the cursor turned out to be no good as it wouldn’t update until the mouse was moved. In this case that wasn’t very helpful.

Turns out, though, that changing a body class via JavaScript—mixed with a couple lines of CSS—does update the cursor without it moving (despite what Google kept telling me). Doubt it’s really news, but it took me a while to get it working. I figured I’d put it out there…

You don’t have to use this with keyup/down. It could be used with an ajax complete event, a timer… whatever you fancy. You can also limit the effect to hovering over certain elements just using the CSS (in this case, something like .cmdDown element { cursor: move }). Click on the “Result” tab below and follow the instructions for a demo, or visit the JSFiddle directly.

Brett Terpstra

Brett is a writer and developer living in Minnesota, USA. You can follow him as ttscoff on Twitter, GitHub, and Mastodon. Keep up with this blog by subscribing in your favorite news reader.

This content is supported by readers like you.

Join the conversation