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

Posted 2023-03-06

【中文标题】如何在 Chrome 中实现抓取光标图标？

【英文标题】：How can you implement a grabbing cursor icon in Chrome?

【发布时间】：2011-04-07 15:32:01

【问题描述】：

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

body 
  cursor: grab;


body 
  cursor: -webkit-grab;



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

【问题讨论】：

这是我找到的最佳答案：***.com/a/18294634/12194067

【参考方案1】：

所以在 CSS 中，你从基础开始，然后转向更晦涩的部分。浏览器将选择适用于该特定浏览器的最后一个。无论出于何种原因，Chrome 都支持 webkit-grab 但不支持抓取。

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

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

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

【讨论】：

...除了浏览器前缀值，因为如果这两个值在浏览器中都可接受，那么您希望它选择标准值，如果不是，它将忽略前缀值。所以你的答案应该交换grab和-webkit-grab的顺序

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

【参考方案2】：

这是 gmail 使用的样式，如果这正是您所追求的光标样式：

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

You can test it out here.

【讨论】：

嗯，它有效！我实际上已经尝试过了，但是没有默认的！import。我想知道那是做什么的？

@Alex - 你可以给锚本身一个具有这种风格的类，或者让它总是有这个类，因为光标只适用于悬停。

@Nick Craver 很抱歉你是对的......愚蠢的语法错误:)

该图标不再存在于该网址

请向下滚动到下面的answer，因为接受的那个不再起作用了。

【参考方案3】：

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

这是一个适用于 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

【讨论】：

我知道这是旧的，但这绝对应该是公认的答案。当浏览器提供自己的光标时使用图像是没有意义的，并且会在所有平台上强制使用相同的图标，所以这绝对是不好的做法。

对于 Firefox 27+，不再需要 -moz- 前缀。

相关：拖动时显示闭合手***.com/a/18294634/188926