目的

• HTMLファイルの要素にマウスカーソルを載せたときだけ見た目が変化したりする設定方法をまとめる。

押さえるポイント

• マウスカーソルが乗った時に変化させたい要素を指定する際に「要素名かクラス名:hover」としてCSSで指定する。
• 必要な情報は①「カーソルが乗った時に変化させたい要素名かクラス名」と②「カーソルが乗った時どのように変化させたいか(文字色を変えたいなど)」

書き方の例

• 下記にCSSファイルの内容を記載する。

要素の名前かクラス名:hover {
  カーソルが乗った時の要素をどうしたいのかの設定
}

より具体的な例

• button要素で囲まれた「新規登録はこちら」のボタンの要素にマウスカーソルを載せたとき透過率を0.5に設定する。
• テキストも投下させたいため、透過率の設定にはopacityを用いる。
• 下記にHTMLファイルの内容を記載する。

<button>新規登録はこちら</button>

• 下記にCSSファイルの内容を記載する。

button:hover {
  opacity: 0.5;
}