【CSS】マウスカーソルの形を変えたい！cursorプロパティを使ってみた

こんにちは朱夏です。

今回は、要素にホバーしたマウスカーソルの形を変更する時に使用するプロパティ「cursor」を使ってみました。

朱夏

マウスホバーした時のカーソルの形を別のものに変更したい。

ヘルプで使われる？マークなど、代表的なものをいくつか紹介させていただきます。
それではいってみましょう。

コード紹介

最初に事項結果のサンプルを置いておきます。

See the Pen
PoqXzrd by 朱夏 (@syunatsu1)
on CodePen.

緑の部分にマウスカーソルを乗せると、それぞれの形に変化するはずです。

以下で簡単に各カーソルの説明を載せておきます。

通常

比較用にカーソル変更をしていない要素になります。

指

リンクの上にカーソルを置いた時の様な指マークが表示されます。
プロパティはこちら。

十字

エクセルで見るような十字のマウスカーソルになります。
プロパティはこちら。

砂時計

読み込み時に出てくる砂時計を表示させます。
プロパティはこちら。

ヘルプ

ヘルプへのリンク等に使われる？マークが表示されます。
プロパティはこちら。

cursorの特徴

「cursor」プロパティの特徴は、疑似セレクタ「hover」を使わなくても、普通にスタイルに追加すれば使える事です。

マウスカーソルの形状を変化させたいだけの場合なら、疑似セレクタ「hover」で個別にスタイルを付ける必要はありません。

あとがき

というわけで、マウスカーソルの変化方法について紹介してみました。

今回のまとめはこちら。

• 「cursor」プロパティを使用する
• 疑似セレクタは不要

基本的には使わなくても、マウスカーソルは場面に合った形状に変化するので、基本的にはそれほど必要なものではないかもしれません。

JavaScriptと組み合わせる場合は、利用する頻度は増えていくと思います。

今回は以上です。
次回もよろしくお願いします。