我有一个JavaScript web应用程序，用户需要抓取背景来移动整个屏幕。我想让光标在它们悬停在背景上时改变。-moz-grab和-moz- grabs是理想的CSS游标。当然，它们只适用于Firefox…其他浏览器是否有等效的游标?我必须做一些比标准CSS游标更自定义的东西吗?
当前回答
您可以创建自己的游标，并使用cursor: url('path-to-your-cursor');将其设置为游标，或者找到Firefox并复制它们(额外的好处:在每个浏览器中都具有良好的一致性外观)。
其他回答
以防其他人偶然发现这个问题，这可能就是你一直在寻找的:
.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;
}
关闭的指针不是16x16。如果你需要他们在相同的尺寸，这里你有他们都在16x16px
或者如果你需要原始游标:
https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur
您可以创建自己的游标，并使用cursor: url('path-to-your-cursor');将其设置为游标，或者找到Firefox并复制它们(额外的好处:在每个浏览器中都具有良好的一致性外观)。
CSS3抓取和抓取现在允许的值为游标。 为了提供跨浏览器兼容性(包括自定义光标文件)，一个完整的解决方案是这样的:
.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;
}
更新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;
}
我可能迟到了，但您可以尝试下面的代码，它对我的拖放工作有效。
.dndclass{
cursor: url('../images/grab1.png'), auto;
}
.dndclass:active {
cursor: url('../images/grabbing1.png'), auto;
}
你可以在上面的URL中使用下面的图片。确保它是一个PNG透明图像。如果没有，请从谷歌下载。
