CSS ・ その他
:hover
マウスを乗せたとき
要素にマウスポインタが乗っているときだけ、スタイルを適用する疑似クラスです。リンクやボタンの反応に使います。
01
サンプルコード
HTML
1<a class="btn" href="#">マウスを乗せてください</a>
CSS
1.btn {
2 display: inline-block;
3 padding: 10px 22px;
4 border: 1px solid #b68235;
5 border-radius: 4px;
6 color: #7d5411;
7 text-decoration: none;
8 transition: background-color .2s, color .2s;
9}
10.btn:hover {
11 background-color: #b68235;
12 color: #fff;
13}
02
実行結果
ブラウザでの表示ボタンにマウスを乗せると色が変わります
03
解説
:hover は、マウスポインタが要素の上にある間だけ当てはまる疑似クラスです。セレクタの後ろに付けて a:hover のように書きます。
transition と組み合わせると、色の変化がなめらかになります。
スマートフォンなどのタッチ操作ではホバーの状態がないため、ホバーしないと見られない情報をつくらないようにします。
04
応用例・注意点
関連する疑似クラス
| 疑似クラス | 説明 |
|---|---|
:hover | マウスが乗っているとき |
:focus-visible | キーボード操作などでフォーカスしたとき |
:active | クリック（タップ）している間 |
:visited | 訪問済みのリンク |
キーボード操作でも同じ見た目にする
:hover と :focus-visible をまとめて指定すると、キーボード利用者にも反応が伝わります。
CSS
1.btn:hover,
2.btn:focus-visible {
3 background-color: #b68235;
4 color: #fff;
5}
ホバーできる環境だけで動かす
タッチ端末でホバーの状態が残る問題を避けられます。
CSS
1@media (hover: hover) {
2 .card:hover {
3 transform: translateY(-2px);
4 }
5}
注意点
- 01メニューの表示などをホバーだけに頼ると、タッチ端末やキーボードで操作できません。
- 02リンクに複数の状態を指定するときは :link → :visited → :hover → :active の順に書きます。