I have a JavaScript webapp where the user needs to grab the background to move the whole screen around. So I want the cursor to change when they're hovering over the background. The -moz-grab
and -moz-grabbing
CSS cursors are ideal for this. Of course, they only work in Firefox... are there equivalent cursors for other browsers? Do I have to do something a little more custom than standard CSS cursors?
7 Answers
In case anyone else stumbles across this question, this is probably what you were looking for:
.grabbable {
cursor: move; /* fallback if grab cursor is unsupported */
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab;
}
/* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
-
59for some reason the 'grabbing' only appears when i release the mouse. any idea why this is?– JonaCommented Jun 13, 2016 at 9:56
-
@Jona my guess is that you didn't add the
grabbable
class to any element which can be grabbed, and you're toggling the class when they're being dragged. Commented Jul 15, 2016 at 20:13 -
2nice extended answer, thanks for adding the extra "grabbing" bit. nice touch. :)– scotselfCommented Aug 19, 2016 at 20:34
-
2For anyone having trouble with this solution, I had to set the
grab
cursor on:hover
rather than the plain selector, i.e..grabbable:hover
in the example above. Commented Oct 25, 2016 at 10:15 -
@Jona adding these styles to the parent
<ul>
instead of<li>
in my case solved the issue Commented Jul 17, 2017 at 10:24
I think move
would probably be the closest standard cursor value for what you're doing:
move
Indicates something is to be moved.
-
1I saw the move icon, thought the grab icon was better. But now that you pointed out w3c considers that cursor "Indicates something is to be moved," it makes the most sense. Thanks.– at.Commented Apr 18, 2011 at 7:05
-
2@at: You can specify multiple cursors in a comma-delimited list and the user agent should use the first one it understands. So you can use the -moz* ones and "move" as a fallback. Commented Apr 18, 2011 at 7:15
-
18@muistooshort are you sure a comma-list still works? I'm using
cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab;
with most preferred last. Commented Jul 19, 2013 at 21:09 -
2@BobStein-VisiBone: I think there could have been some confusion up there a couple years ago. AFAIK the comma-list works if you're specifying multiple formats like
cursor: url(example.svg#linkcursor), url(hyper.cur), pointer
rather than multiple possible values. I think you're approach might be necessary. Commented Jul 19, 2013 at 21:41
CSS3 grab
and grabbing
are now allowed values for cursor
.
In order to provide several fallbacks for cross-browser compatibility3 including custom cursor files, a complete solution would look like this:
.draggable {
cursor: move; /* fallback: no `url()` support or images disabled */
cursor: url(images/grab.cur); /* fallback: Internet Explorer */
cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
cursor: -moz-grab; /* Firefox 1.5-26 */
cursor: grab; /* W3C standards syntax, should come least */
}
.draggable:active {
cursor: url(images/grabbing.cur);
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
Update 2019-10-07:
.draggable {
cursor: move; /* fallback: no `url()` support or images disabled */
cursor: url(images/grab.cur); /* fallback: Chrome 1-21, Firefox 1.5-26, Safari 4+, IE, Edge 12-14, Android 2.1-4.4.4 */
cursor: grab; /* W3C standards syntax, all modern browser */
}
.draggable:active {
cursor: url(images/grabbing.cur);
cursor: grabbing;
}
-
2Your post is a duplicate of J.Steve's– user2230470Commented Sep 22, 2016 at 5:41
-
12@user2230470 It is different in two important points: First, it provides an cursor image for the browsers not supporting
grab
, but cursor images. Second, it's best practice to have standards syntax after the vendor prefixed values. Commented Sep 30, 2016 at 18:15 -
really?! how come? also, where can i find more info about standard practices akin to such.– user2230470Commented Oct 2, 2016 at 2:29
-
10@user2230470 - because in cases where a browser supports 2 behaviors where the prefixed one may have been implemented slightly before the finalization of the standard one (and therefore may act differently) you want it to use the standard one...and whatever definition comes LAST is the one the browser will use. Therefore the standard one should go last. Commented Oct 31, 2016 at 15:15
-
3is
images/grab.cur
an example URL for an image that I need to host on my web server, or is that some magic IE thing?– jrzCommented Aug 12, 2017 at 2:48
"more custom" than CSS cursors means a plugin of some type, but you can totally specify your own cursors using CSS. I think this list has what you want:
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(https://www.w3schools.com/cssref/myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
<h1>The cursor Property</h1>
<p>Hover mouse over each to see how the cursor looks</p>
<p class="alias">cursor: alias</p>
<p class="all-scroll">cursor: all-scroll</p>
<p class="auto">cursor: auto</p>
<p class="cell">cursor: cell</p>
<p class="context-menu">cursor: context-menu</p>
<p class="col-resize">cursor: col-resize</p>
<p class="copy">cursor: copy</p>
<p class="crosshair">cursor: crosshair</p>
<p class="default">cursor: default</p>
<p class="e-resize">cursor: e-resize</p>
<p class="ew-resize">cursor: ew-resize</p>
<p class="grab">cursor: grab</p>
<p class="grabbing">cursor: grabbing</p>
<p class="help">cursor: help</p>
<p class="move">cursor: move</p>
<p class="n-resize">cursor: n-resize</p>
<p class="ne-resize">cursor: ne-resize</p>
<p class="nesw-resize">cursor: nesw-resize</p>
<p class="ns-resize">cursor: ns-resize</p>
<p class="nw-resize">cursor: nw-resize</p>
<p class="nwse-resize">cursor: nwse-resize</p>
<p class="no-drop">cursor: no-drop</p>
<p class="none">cursor: none</p>
<p class="not-allowed">cursor: not-allowed</p>
<p class="pointer">cursor: pointer</p>
<p class="progress">cursor: progress</p>
<p class="row-resize">cursor: row-resize</p>
<p class="s-resize">cursor: s-resize</p>
<p class="se-resize">cursor: se-resize</p>
<p class="sw-resize">cursor: sw-resize</p>
<p class="text">cursor: text</p>
<p class="url">cursor: url</p>
<p class="w-resize">cursor: w-resize</p>
<p class="wait">cursor: wait</p>
<p class="zoom-in">cursor: zoom-in</p>
<p class="zoom-out">cursor: zoom-out</p>
Source: CSS cursor Property @ W3Schools
I may be late, but you can try the following code, which worked for me for Drag and Drop.
.dndclass{
cursor: url('../images/grab1.png'), auto;
}
.dndclass:active {
cursor: url('../images/grabbing1.png'), auto;
}
You can use the images below in the URL above. Make sure it is a PNG transparent image. If not, download one from google.
You can create your own cursors and set them as the cursor using cursor: url('path-to-your-cursor');
, or find Firefox's and copy them (bonus: a nice consistent look in every browser).
The closed hand cursor is not 16x16. If you would need them in the same dimensions, here you have both of them in 16x16 px
Or if you need original cursors:
https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur