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の値を列挙しています。