CSSでマウスカーソルを変更する方法【現役エンジニアが解説】

PROGRAM

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