女性向けエンジニアスクール
3秒でわかる
マウスポインタが要素の上に重なっている状態のこと。押せる場所であることを見た目で伝える手段で、CSS の擬似クラスとして書くのが基本です。
もう少し詳しく
どういうものか
マウスポインタが要素の領域に入っている間だけ成立する状態を指します。CSS では hover 擬似クラスとして書き、この状態のときだけ色や影、下線などを差し替えます。JavaScript 側では mouseenter や mouseleave といったイベントとして受け取れます。
重要なのは、これがユーザーの操作を伴わない「重なっているだけ」の状態だという点です。クリックは何かが起きるという約束ですが、ホバーは「ここは押せる」という予告にあたります。
なぜ必要か
平らなデザインでは、ボタンとただの文字が見た目で区別しづらくなります。ポインタを乗せた瞬間に色が変わる、下線が出る、といった反応があると、そこが操作できる要素だと一目で分かります。反応が全く返らない画面は、押しても大丈夫か確かめる手間をユーザーに押し付けることになります。
一覧の行を強調して視線を保つ、削除ボタンだけ赤く変えて危険を予告する、といった使い方も同じ目的です。
具体例
状態変化は、時間をかけて滑らかにすると押せる感じが出ます。
.button {
background-color: #0071e3;
color: #fff;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover {
background-color: #005bbb;
transform: translateY(-1px);
}
/* キーボード操作でも同じ強調を出す */
.button:focus-visible {
outline: 2px solid #0071e3;
outline-offset: 2px;
}
/* 触るデバイスでは適用しない */
@media (hover: none) {
.button:hover { background-color: #0071e3; }
}つまずきやすいところ
最大の落とし穴はスマートフォンです。タッチ操作にはポインタを乗せる動作が無いため、指で触れた瞬間にホバー状態が成立し、指を離しても解除されずに残り続けます。次にどこかを触るまで色が変わったまま、という不自然な画面になります。ホバーが使える環境かどうかをメディア特性で判定して切り分けます。
もうひとつは、ホバーでしか出ない情報を作ってしまうことです。ポインタを乗せないと見えないメニューや説明は、キーボードだけで操作する人やタッチ端末の利用者には存在しないのと同じになります。フォーカス時にも同じものが出るようにしておくと、この問題は起きません。
ドロップダウンが消えてしまう不具合も定番で、親要素と子メニューの間に数ピクセルの隙間があると、そこを通過した瞬間にホバーが外れて閉じます。隙間を透明な余白で埋めて連続させると直ります。
覚え方
ホバーは英語で「空中に留まる」。触れてはいないが上に浮いている状態、と結び付けると、クリックとの役割の違いを取り違えません。
