CSS抓取游标(拖放)

我有一个JavaScript web应用程序，用户需要抓取背景来移动整个屏幕。我想让光标在它们悬停在背景上时改变。-moz-grab和-moz- grabs是理想的CSS游标。当然，它们只适用于Firefox…其他浏览器是否有等效的游标?我必须做一些比标准CSS游标更自定义的东西吗?

您可以创建自己的游标，并使用cursor: url('path-to-your-cursor');将其设置为游标，或者找到Firefox并复制它们(额外的好处:在每个浏览器中都具有良好的一致性外观)。

2011-04-17 23:09:44

“比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> Hover mouse over each to see how the cursor looks cursor: alias cursor: all-scroll cursor: auto cursor: cell cursor: context-menu cursor: col-resize cursor: copy cursor: crosshair cursor: default cursor: e-resize cursor: ew-resize cursor: grab cursor: grabbing cursor: help cursor: move cursor: n-resize cursor: ne-resize cursor: nesw-resize cursor: ns-resize cursor: nw-resize cursor: nwse-resize cursor: no-drop cursor: none cursor: not-allowed cursor: pointer cursor: progress cursor: row-resize cursor: s-resize cursor: se-resize cursor: sw-resize cursor: text cursor: url cursor: w-resize cursor: wait cursor: zoom-in cursor: zoom-out

来源:CSS光标属性@ W3Schools

2011-04-17 23:09:56

我认为move可能是最接近你所做事情的标准游标值:

移动表示要移动某物。

2011-04-17 23:12:29

以防其他人偶然发现这个问题，这可能就是你一直在寻找的:

.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;
}

2013-08-18 00:34:16

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;
}

2016-02-20 00:38:36

我可能迟到了，但您可以尝试下面的代码，它对我的拖放工作有效。

.dndclass{
    cursor: url('../images/grab1.png'), auto; 

}

.dndclass:active {
    cursor: url('../images/grabbing1.png'), auto;
}

你可以在上面的URL中使用下面的图片。确保它是一个PNG透明图像。如果没有，请从谷歌下载。

2016-07-20 11:03:22

关闭的指针不是16x16。如果你需要他们在相同的尺寸，这里你有他们都在16x16px

或者如果你需要原始游标:

https://www.google.com/intl/en_ALL/mapfiles/openhand.cur https://www.google.com/intl/en_ALL/mapfiles/closedhand.cur

2018-12-19 14:50:38

CSS抓取游标(拖放)

推荐文章

最新文章

标签