こんにちは朱夏です。
今回は、要素にホバーしたマウスカーソルの形を変更する時に使用するプロパティ「cursor」を使ってみました。
マウスホバーした時のカーソルの形を別のものに変更したい。
ヘルプで使われる？マークなど、代表的なものをいくつか紹介させていただきます。
それではいってみましょう。
[もくじ]
コード紹介
cursorプロパティの特徴
あとがき
コード紹介
最初に事項結果のサンプルを置いておきます。
See the Pen
PoqXzrd by 朱夏 (@syunatsu1)
on CodePen.
緑の部分にマウスカーソルを乗せると、それぞれの形に変化するはずです。
以下で簡単に各カーソルの説明を載せておきます。
通常
比較用にカーソル変更をしていない要素になります。
指
リンクの上にカーソルを置いた時の様な指マークが表示されます。
プロパティはこちら。
cursor: pointer;
十字
エクセルで見るような十字のマウスカーソルになります。
プロパティはこちら。
cursor: crosshair;
砂時計
読み込み時に出てくる砂時計を表示させます。
プロパティはこちら。
cursor: wait;
ヘルプ
ヘルプへのリンク等に使われる？マークが表示されます。
プロパティはこちら。
cursor: help;
cursorの特徴
「cursor」プロパティの特徴は、疑似セレクタ「hover」を使わなくても、普通にスタイルに追加すれば使える事です。
マウスカーソルの形状を変化させたいだけの場合なら、疑似セレクタ「hover」で個別にスタイルを付ける必要はありません。
あとがき
というわけで、マウスカーソルの変化方法について紹介してみました。
今回のまとめはこちら。
- 「cursor」プロパティを使用する
- 疑似セレクタは不要
基本的には使わなくても、マウスカーソルは場面に合った形状に変化するので、基本的にはそれほど必要なものではないかもしれません。
JavaScriptと組み合わせる場合は、利用する頻度は増えていくと思います。
今回は以上です。
次回もよろしくお願いします。
