CSSを学習していると、hover（ホバー）というテクニックが出てきます。
使えるようになると、指定している要素に重なった時、スタイルが変わるので、面白い表現が可能になります。
今回の記事では「hover」の使い方をサンプルを用いて解説します。効かない時の対処法も併せて紹介します。
目次
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とよく使われるプロパティです。
hoverが効かない時の対処法
指定したはずなのに、hoverが効かない場合の対処法を紹介しておきます。
・「:hover」の前に空白が入っている
・「:」が多い
「:hover」の前に空白が入っている
「:hover」の前に空白が入っていると、指定が効かなくなるので注意が必要です。
要素と「:hover」は、空白無く詰めて下さい。
「:」が多い
本記事では詳しく紹介しませんが、擬似要素（要素の一部に対してスタイルを適用する）というものがあり、その際の書式が「::〇〇」の為、混同して使用してしまうパターンです。
「::hover」と指定しても効かないのでご注意ください。
まとめ
「hover」というものがどんなものか理解できましたでしょうか？
使えるようになると、色々と面白い表現が可能になりますので、是非使い方をマスターしてみて下さい。
コメント