如何在Chrome中实现抓取光标图标？

Question

我知道在Chrome中（当然是在Gmail中）可以使用抓取光标图标，但我无法弄清如何在我的代码中实现它。我已尝试过以下CSS：

body {
  cursor: grab;
}

body {
  cursor: -webkit-grab;
}


body {
  cursor: url(http://www.worldtimzone.com/mozilla/testcase/css3cursors_files/grab.gif);
}

- Alex

---

这是我找到的最佳答案：https://dev59.com/4G025IYBdhLWcg3w96wW#18294634 - cseguinlz

Answer 1

Chrome需要在“grab”名称之前加上-webkit-；

以下是一个既适用于Chrome又适用于Mozilla的样式示例，包括当你“持有”某物时光标的变化。

#eA { cursor: -webkit-grab; cursor:-moz-grab; }
#eA:active { cursor: -webkit-grabbing; cursor:-moz-grabbing;}

参考资料：https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

- Ulad Kasach

---

我知道这已经有一段时间了，但这应该绝对是被接受的答案。在浏览器提供自己的光标时使用图像是毫无意义的，并且会强制所有平台使用相同的图标，所以这绝对是不好的做法。 - GavinoGrifoni

在Firefox 27及以上版本中，不再需要使用“-moz-”前缀。 - hirse

相关内容：拖拽时显示关闭的手 https://dev59.com/4G025IYBdhLWcg3w96wW#18294634 - Dunc

Answer 2

如果您想要与Gmail相同的光标样式，请使用以下样式：

body {
  cursor: url(https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur), default !important;
}

在这里你可以测试它.

- Nick Craver

---

@Alex - 你可以给锚点本身加上这个样式的类，或者让它始终具有该类，因为光标只在悬停时应用。 - Nick Craver

@Nick Craver 对不起，你是对的...语法错误很傻 :) - Alex

该图标在该URL上不再存在。 - Urbycoz

请滚动到下面的答案，因为已接受的答案不再起作用。 - Ricardo

光标图像可以在此处找到 https://www.cdnpkg.com/slider-pro/file/closedhand.cur/ - Mariana Marica

Answer 3

在CSS中，你要从基础开始逐渐深入。浏览器会选择最后一个在该特定浏览器下有效的样式。Chrome之所以支持webkit-grab但不支持grab，原因未知。

body {
  cursor: pointer;
  cursor: hand;
  cursor: -webkit-grab;
  cursor: grab;
}

关于您后续提出的有关操纵此能力的问题，请尝试使用以下内容：

document.body.style.cursor = 'move';

- Nicholas Blasgen

---

除了浏览器前缀值之外，因为如果两个值在浏览器中都可以接受，那么您希望它选择标准值，如果不能，则会忽略前缀的值。因此，您的答案应该交换 grab 和 -webkit-grab 的顺序。 - Jimbo Jonny

只是要注意，上面的评论是在编辑中实现的。 - M Somerville