【CSS】カーソルを載せたときにスタイルを変更する方法を実例で解説｜:hover（ホバー）とは何か？使い方と注意点（初心者向け、わかりやすい）

CSSで最もよく使う処理の一つに「:hover」があります。

ここでは「:hover」の使い方や注意点を実例で解説しています。

:hoverとは何か？

:hoverとは、要素にカーソルを移動したときのみ別のスタイルを適用する処理です。

以下のようにスタイルを適用したい要素の後ろに「:hover」を記載します。

対象要素:hover{ 処理 }

なお、ホバー（hover）とは、ヘリコプターが空中で停止している状態を表します。

CSSではマウスが要素の上に乗っている状態を表現しています。

:hover使用時の注意点

:hoverで作成した疑似クラスには、対象要素のプロパティが引き継がれます。

例えば、「p:hover」としたときに、pタグに「color: red;」が指定してあれば、:hoverで作成した要素にも同じく「color: red;」が適用されます。

色を変えたい場合は、:hoverの中でcolorプロパティを指定する必要があります。

実例

例えば、以下のように「何の変哲もないテキスト」があるとします。

<p>何の変哲もないテキスト</p>

CSSを適用しないデフォルトの状態では画面の表示は以下のようになっています。

このテキストの上にカーソルを移動したときのみ、他のスタイルを適用させたい場合は:hoverを使います。

p:hover{
  background-color: yellow;
  font-weight: bold;
  cursor: pointer;
}

すると画面の表示は以下のようになります。

　　↓ カーソルをテキストの上に移動

ホバー時のみ指定したスタイルが適用されます。

実例：対象要素のプロパティの引継ぎと打ち消し

:hoverで作成した疑似クラスは、対象要素のプロパティを引き継ぎます。

例えば、以下のように「スタイルを調整したテキスト」があるとします。

<p>スタイルを調整したテキスト</p>

p{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

ブラウザでの表示は以下のようになっています。

この要素に対して、:hoverを使って、ホバーしたときのスタイルを設定します。

p{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

p:hover{
  color: blue;
}

ホバーしたときのブラウザの表示は以下のようになります。

下線や文字の太さなど、対象の要素のプロパティがそのまま引き継がれていることがわかります。

対象の要素のプロパティを打ち消したいときは、:hoverの中でそのプロパティを上書きする記述を書きます。

p{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-decoration: underline;
}

p:hover{
  color: blue;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
}

すると、ホバーしたときの画面の表示は以下のようになります。