カーソルを非表示にする

cursorに透過画像を指定して、カーソルを非表示にできるかどうかを試してみました。

サンプルコード

32px×32pxの透過画像で試してみます。

HTML

<div id="sample"></div>

CSS

#sample {
	width: 300px;
	height: 300px;
	border: #000 1px solid;
	cursor: url(cursor.cur), auto;
}

カーソルを非表示にするデモページ
Firefoxではカーソルを非表示にできましたが、Google ChromeとIEとEdgeでは黒く塗りつぶされた状態になりました。

1px×1pxの透過画像にしてみます。

CSS

#sample {
	width: 300px;
	height: 300px;
	border: #000 1px solid;
	cursor: url(cursor2.cur), auto;
}

塗りつぶされる範囲が小さくなったので見た目的には非表示になりましたが、よく見ると小さいドットがカーソルに合わせてついてきています。
カーソルを非表示にするデモページ2

透過画像ではなく白色の画像にしてみます。

CSS

#sample {
	width: 300px;
	height: 300px;
	border: #000 1px solid;
	cursor: url(cursor3.cur), auto;
}

見た目的にはカーソルを消すことができました。
カーソルを非表示にするデモページ3