开发者

How can you implement a grabbing cursor icon in Chrome?

I know it's possible to use a开发者_如何学C 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):

body {
  cursor: grab;
}

body {
  cursor: -webkit-grab;
}


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


Chrome Requires -webkit- before the "grab" name;

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.

#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


Here's the styling that gmail uses if that's the exact cursor style you're after:

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

You can test it out here.


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.

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';
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜