用于抓取光标的 CSS（拖放）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5697067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS for grabbing cursors (drag & drop)
提问by at.
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-graband -moz-grabbingCSS 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?
我有一个 JavaScript 网络应用程序，用户需要在其中抓取背景以移动整个屏幕。所以我希望光标在悬停在背景上时发生变化。在-moz-grab和-moz-grabbingCSS光标是非常理想的。当然，它们只能在 Firefox 中工作……其他浏览器是否有等效的光标？我是否必须做一些比标准 CSS 游标更自定义的事情？
采纳答案by mu is too short
I think movewould probably be the closest standard cursor valuefor what you're doing:
我认为move可能是您正在做的最接近的标准光标值：
move
Indicates something is to be moved.
move
表示要移动某物。
回答by J.Steve
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;
}
回答by Volker E.
CSS3graband grabbingare now allowed values for cursor.
In order to provide several fallbacks for cross-browser compatibility3including custom cursor files, a complete solution would look like this:
CSS3grab和grabbing现在允许值为cursor. 为了提供多种跨浏览器兼容性3 的回退，包括自定义光标文件，完整的解决方案如下所示：
.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:
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;
}
回答by Winfield Trail
"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:
“比 CSS 游标更自定义”意味着某种类型的插件，但您可以使用 CSS 完全指定自己的游标。我认为这个列表有你想要的：
.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
回答by Ry-
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).
您可以创建自己的游标并使用 将它们设置为游标cursor: url('path-to-your-cursor');，或者找到 Firefox 并复制它们（奖励：在每个浏览器中的外观一致）。
回答by Jeeva
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.
您可以在上面的 URL 中使用下面的图片。确保它是 PNG 透明图像。如果没有，请从谷歌下载一个。
回答by Zenon
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
闭合的手形光标不是 16x16。如果您需要相同尺寸的它们，这里有两个 16x16 像素
Or if you need original cursors:
或者，如果您需要原始游标：
https://www.google.com/intl/en_ALL/mapfiles/openhand.curhttps://www.google.com/intl/en_ALL/mapfiles/closedhand.cur
https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur
