0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML の 要素 に マウスカーソル を 載せたときだけ反映される設定をする

Last updated at Posted at 2021-02-10

目的

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

押さえるポイント

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

書き方の例

  • 下記にCSSファイルの内容を記載する。
要素の名前かクラス名:hover {
  カーソルが乗った時の要素をどうしたいのかの設定
}

より具体的な例

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?