nlog

とめどなく流れるよだれ

カーソルの形状を変える

f:id:namikuguri:20180209224745p:plain

インターネットをしているとカーソルの形が様々に変わる。ボタンにマウスオーバーすると手の形に、フォームの入力欄にフォーカスすると I の形に。これらのカーソルの形は CSS で変えることができる。cursor プロパティを使う。

30 種類を超える形があるが、defaultpointertext はもちろん、crosshair をエクセルなどで日常的に見ている人も多いんじゃないだろうか。

また、よくできてるアプリケーションでも適切なカーソルが設定されていない場合がある。以下の 2つはもう少し目にする機会があってもいいのにと思った。使いどころはありそうだ。

  • copy ... コピーできるものに使う
  • help ... ヘルプが見れるコンテンツに使う

cursor プロパティには URL で画像も指定できる。画像の左上を基準にしてカーソルで表示する部分を切り抜くこともできるみたいだが、これはデモの中で指定しても適用されてるのが確認できなかった。FirefoxChrome でみた。

li:nth-child(38) {
cursor: url(https://cdn.profile-image.st-hatena.com/users/namikuguri/profile.png?1504268343) 12 12, auto;
}