カーソルに画像を使用する

cursorに画像を指定してみます。

サンプルコード

使用する画像のサイズは32px×32pxで用意しました。

HTML

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

CSS

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

cursorに画像を使用するデモページ
Google ChromeやFirefoxでは問題なく表示できましたが、IEとEdgeではうまく表示できませんでした。

IEとEdgeではpng画像に対応していないようなので、こちらのサイトで.cur形式に変換してみます。

CSS

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

IEとEdgeでもcursorが変更されました。
cursorに画像を使用するデモページ2
　

【参考サイト】

• cursor – CSS | MDN
• cursor のプロパティーに URL 値を使用する | MDN
• Using URL values for the cursor property – CSS | MDN