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

CSS
スポンサーリンク

こんにちは朱夏です。

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

朱夏
朱夏

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

 

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

 

[もくじ]
コード紹介
cursorプロパティの特徴

あとがき

コード紹介

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

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

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

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

通常

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

 

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

cursor: pointer;

 

十字

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

cursor: crosshair;

 

砂時計

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

cursor: wait;

 

ヘルプ

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

cursor: help;

 

cursorの特徴

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

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

 

あとがき

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

今回のまとめはこちら。

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

 

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

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

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

 

タイトルとURLをコピーしました