【CSS】hoverとは？サンプル付きで解説！効かない時の対処法も！

CSSを学習していると、hover（ホバー）というテクニックが出てきます。

使えるようになると、指定している要素に重なった時、スタイルが変わるので、面白い表現が可能になります。

今回の記事では「hover」の使い方をサンプルを用いて解説します。効かない時の対処法も併せて紹介します。

1 hoverとは？
- 1.1 書式について
2 サンプル紹介
- 2.1 重なると、ボタンのスタイルが変わるサンプル
3 hoverが効かない時の対処法
- 3.1 「:hover」の前に空白が入っている
- 3.2 「:」が多い
4 まとめ

hoverとは？

hoverとは、CSSの擬似クラスで、カーソルが対象にホバーした時（重なった時）スタイルを変更する為のものです。

擬似クラスとは、指定の要素が特定の状態である場合に適用するスタイルを決めるもの。

カーソルを合わせると、ボタンの色や形が変わったり、画像が動いたりするのを見たことがあるかもしれませんが、これは、hoverを使って実装している場合が多いです。

書式について

書式は下記の通りです。

/* 書式 */
要素名:hover{
 プロパティ名:値;
}

要素名の後ろに「:hover」を付けるだけとなります。

要素と「:hover」に空白を入れると効かなくなるので注意して下さい。

これだけ見ても、使い方のイメージが難しいと思いますので、サンプルを用いて解説していきます！

サンプル紹介

では、サンプルを用意しましたので、詳しく見てみましょう。このサンプルで、hoverで何ができるのかイメージができると思います。

重なると、ボタンのスタイルが変わるサンプル

カーソルを重ねると、ボタンのスタイルが変わる時のサンプルコードです。

<a href="#" class="hover-btn">サンプルボタン</a>

/* 重なっていない時の通常のスタイル */
.hover-btn {
  width: 150px;
  padding: 15px 0;
  margin: 0 auto;
  display: block;
  font-size: 16px;
  position: relative;
  text-align: center;
  text-decoration: none;
  color: white;
  background: blue;
}
/* 重なった時のスタイル */
.hover-btn:hover {
  color: black;
  background: lightskyblue;
  border-radius: 30px;
　transition: 0.5s;
}

サンプルボタン

ボタンにカーソルを合わせると、背景色、文字色、形がゆっくりと変わるはずです。

考え方としては、重なったら変わる部分を、「:hover」の部分に書けば良いです。

今回のサンプルの場合、「背景色（青）、文字色（白）、形（四角）」→「背景色（空色）、文字色（黒）、形（楕円形）、変化の時間は0.5秒で」になります。

色々とCSSプロパティが出てきていますが、1つ1つ意味を調べてみて下さい。特に、transitionプロパティ（変化の時間の指定）は、hoverとよく使われるプロパティです。