カーソルの形状を変える
インターネットをしているとカーソルの形が様々に変わる。ボタンにマウスオーバーすると手の形に、フォームの入力欄にフォーカスすると I の形に。これらのカーソルの形は CSS で変えることができる。cursor プロパティを使う。
30 種類を超える形があるが、default や pointer、text はもちろん、crosshair をエクセルなどで日常的に見ている人も多いんじゃないだろうか。
また、よくできてるアプリケーションでも適切なカーソルが設定されていない場合がある。以下の 2つはもう少し目にする機会があってもいいのにと思った。使いどころはありそうだ。
copy... コピーできるものに使うhelp... ヘルプが見れるコンテンツに使う
cursor プロパティには URL で画像も指定できる。画像の左上を基準にしてカーソルで表示する部分を切り抜くこともできるみたいだが、これはデモの中で指定しても適用されてるのが確認できなかった。Firefox と Chrome でみた。
li:nth-child(38) { cursor: url(https://cdn.profile-image.st-hatena.com/users/namikuguri/profile.png?1504268343) 12 12, auto; }
