サイト制作に関するメモ書き

HOME > HTML・CSS > カーソルに画像を使用する

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

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
 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP