web-dev-qa-db-ja.com

Chromeでグラバーカーソルアイコンを実装するにはどうすればよいですか？

Chrome（もちろんGmailの場合）でグラブカーソルアイコンを使用できることは知っていますが、コードに実装する方法がわかりません。私は（CSSで）試しました）：

body {
  cursor: grab;
}

body {
  cursor: -webkit-grab;
}


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

以下は、あなたが求めている正確なカーソルスタイルである場合にGmailが使用するスタイルです。

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

ここでテストできます 。

14
Nick Craver

Chromeでは、「グラブ」名の前に-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

77
Ulad Kasach

したがって、CSSでは、基本から始めて、よりあいまいなものに移動します。ブラウザは、その特定のブラウザで機能する最後のものを選択します。 Chromeは、何らかの理由でwebkit-grabをサポートしていますが、サポートしていません。

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

これを操作する機能に関するフォローアップの質問については、次のようなものを使用してみてください。

document.body.style.cursor = 'move';
14
Nicholas Blasgen