CSSでマウスカーソルを変更する方法【現役エンジニアが解説】
今回は、CSSでマウスカーソルを変更する方法について、基本的な指定方法と画像の指定方法に分け、簡単に解説していきます。
カーソルの指定
cursorプロパティでカーソルの指定が可能です。
その値は、例えば、pointerにするとリンクと同じ形状になります。
.hoge{ cursor:help; }
上記のコードでは、hogeのクラスの要素上のカーソルの形状をヘルプにしています。
カーソルへの画像の指定
cursorプロパティの値には画像を指定することもできます。
画像を指定する場合には、値はurl(画像のパス)の形式で指定します。
.hoge{ cursor:url(hoge.png); }
上記のコードでは、hogeというクラスの要素上のカーソルの形状をhoge.pngにしています。
IE未対応のカーソルの一覧
cursorプロパティの値には数十種類あり、様々な形状があります。
しかし、IE(Internet Explorer)では未対応のカーソルがあるため、注意が必要です。
.ie-ng-cursor-icon-1{ cursor:grab; } .ie-ng-cursor-icon-2{ cursor:grabbing; } .ie-ng-cursor-icon-3{ cursor:zoom-in; } .ie-ng-cursor-icon-4{ cursor:zoom-out; }
上記のコードでは、grabやgrabbing、zoom-in、zoom-outといったIEでは未対応のcursorの値を列挙しています。