Javascript 如何在 Chrome 中实现抓取光标图标?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3632532/
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
How can you implement a grabbing cursor icon in Chrome?
提问by Alex
I know it's possible to use a grabbing cursor icon in Chrome (in Gmail, of course), but I can't figure out how to implement it in my code. I have tried (in CSS):
我知道可以在 Chrome 中使用抓取光标图标(当然在 Gmail 中),但我不知道如何在我的代码中实现它。我试过(在 CSS 中):
body {
cursor: grab;
}
body {
cursor: -webkit-grab;
}
body {
cursor: url(http://www.worldtimzone.com/mozilla/testcase/css3cursors_files/grab.gif);
}
采纳答案by Nick Craver
Here's the styling that gmail uses if that's the exact cursor style you're after:
如果这是您所追求的确切光标样式,那么这是 gmail 使用的样式:
body {
cursor: url(https://ssl.gstatic.com/ui/v1/icons/mail/images/2/openhand.cur), default !important;
}
回答by Ulad Kasach
Chrome Requires -webkit- before the "grab" name;
Chrome 需要 -webkit- 在“grab”名称之前;
Here's an example of a style that works with both Chrome and Mozilla, and includes the change in cursor for when you are "holding" something.
这是一个适用于 Chrome 和 Mozilla 的样式示例,包括当您“拿着”某些东西时光标的变化。
#eA { cursor: -webkit-grab; cursor:-moz-grab; }
#eA:active { cursor: -webkit-grabbing; cursor:-moz-grabbing;}
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
回答by Nicholas Blasgen
So in CSS you start with the basics and move to the more obscure. The browser will pick the last one that works for that specific browser. Chrome, for whatever reason, supports webkit-grab but not grab.
所以在 CSS 中,你从基础开始,然后转向更模糊的。浏览器将选择适用于该特定浏览器的最后一个。无论出于何种原因,Chrome 支持 webkit-grab 但不支持抓取。
body {
cursor: pointer;
cursor: hand;
cursor: -webkit-grab;
cursor: grab;
}
Regarding your follow-up question about the ability to manipulate this, please try using something like the following:
关于您关于操纵它的能力的后续问题,请尝试使用以下内容:
document.body.style.cursor = 'move';

