カーソルの形状を変更する方法 (cursor) [CSS]

カーソル

ドキュメント：

cursor | MDN

使い方

参考：

cursor の使い方 カーソル形状の変え方と値一覧 | サルワカ

CSS3 で使える 35 + α 種類のカーソルの一覧表 | Ginpen.com

cursor | スタイルシートリファレンス

カーソルの形を変更する | TAG index

要素を選択できないようにする

要素を選択できないようにする。

.unselectable {
    user-select: none;
}Code language: CSS (css)

デフォルト値を明示的に設定する。

.selectable-default {
    user-select: auto;
}Code language: CSS (css)

ドキュメント：

user-select | MDN

参考：

要素を選択不可にする – Qiita

user-select | Can I Use Support Tables

データ URL で画像を指定する

SVG ファイルを Base64 エンコードしてデータ URL で指定する。

.area:hover {
    cursor: url("data:image/svg+xml;base64,...=") 24 24, auto;
}Code language: CSS (css)

ドキュメント：

url() | MDN

参考：

cursor Image using SVG Base64 URI – Stack Overflow

css cursor using data-uri – Stack Overflow