ホバープレビューカード
ホバープレビューカードは、リンクの上にカーソルを乗せると、その下に補足情報の小さなカードがふわっと現れる UI です。実装は mouseenter と mouseleave で表示用のクラスを付け外しするだけで、見た目の変化はすべて CSS が担います。
解説
ホバープレビューカードは、リンクの上にカーソルを乗せると、その下に補足情報の小さなカードがふわっと現れる UI です。実装は mouseenter と mouseleave で表示用のクラスを付け外しするだけで、見た目の変化はすべて CSS が担います。カードは初期状態で opacity を 0、少し下にずらしておき、表示時に不透明かつ定位置へ戻すことで、滑らかに浮かび上がる印象を作っています。pointer-events を切り替えて、非表示時に誤クリックを防いでいる点も丁寧です。
使いどころ
- 用語や人名にカーソルを当てると説明を出す、注釈つきの本文
- 商品名やリンクの先に何があるかを事前に見せたいとき
- ナビゲーションのメニュー項目に概要を添えるケース
カードの位置は top や left、幅は width で調整でき、現れる速さは transition の秒数で変えられます。注意点として、ホバーはマウス操作が前提のため、タッチ端末では表示されません。スマホも考えるならタップで開閉する分岐や、キーボードのフォーカス時にも出る仕組みを足すと、より多くの人に届きます。
使用例・適したシーン
- ナビゲーションのインタラクティブ装飾
- ギャラリーのホバーリビール
- サービスカードの強調
よくある質問
カードが出る位置や大きさを変えられますか
カードの位置は CSS の上下左右の指定で、大きさは幅の値で調整できます。表示が画面外にはみ出る場合は、左右の基準やはみ出し対策を加えると安定します。
スマホでも表示されますか
この演出はカーソルのホバーを前提にしているため、タッチ端末では表示されません。スマホにも対応させたい場合は、タップで開閉する操作やフォーカス時の表示を追加するとよいです。