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

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
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年1月
 1
2345678
9101112131415
16171819202122
23242526272829
3031