【HTML・CSS】マウスカーソルを要素の上に来た時にアクションを発生させる方法（疑似クラス:hover）

80

Views

WEBページのボタンや、写真などの各要素の上にマウスカーソルを持って行った際、疑似クラスの「:hover」を使うことで、色が変わったり拡大したりといったアクションを起こすことが出来ます。

　

この記事では初心者向けに

　

  • 疑似クラス「:hover」とは？
  • 疑似クラス「:hover」の使い方

　

について解説をしていきます。

HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！

疑似クラス「:hover」について解説

前述したとおり、疑似クラス「:hover」を指定すると、任意の要素の上にマウスカーソルがある場合、指定したアクションを起こすことが出来ます。

マウスホバーを解除したときの動作

マウスカーソルを他に移動させてマウスホバーを解除すると、元の状態に戻るので、マウスカーソルを離したときに元の状態に戻すといった記述は特に必要ありません。

疑似クラス「:hover」を定義する箇所

疑似クラス「:hover」の定義は、対象の要素をデザインする部分の前でも後でも動作します。

疑似クラス「:hover」の使用例

以下は「btnクラスに対して通常の背景色は茶色。マウスホバー時に背景色を黒に変化させる」例です。

HTML

<a href="#" class="btn">マウスホバー時にアクションを起こすボタンです</a>

CSS

a.btn{
  display:inline-block;
  height:100px;
  line-height:100px;
  font-size:0.7rem;
  color:white;
  text-decoration-line:none;
  background-color:brown;
}
a.btn:hover{
  background-color:black;
}

　

以上となります。