フロントエンドに進路を取れ

マウスホバーすると表示されて、ホバーを外すして少ししたら消えるヘッダーの作り方

May 27, 2019

画像のプレビューなどでよくホバーすると表示されて、ホバーを外して少し時間がたったら消えるヘッダーを作ることになったのでメモ。

facebookの画像プレビュー画面

実装方法

  1. ヘッダーのopacityを通常時に0、ホバーした時に1にする
  2. 通常時とホバーした時それぞれのスタイルにtransition: opacity 秒数を追加する
  3. 通常時にtransition-delayを指定する

面白いのがtransitionを通常時とホバーした時それぞれに書くところ。両方に書くことでそれぞれの場合でtransitionを書き分けることができる。

本当は初回の読み込み時は表示して一定時間たったら消えるようにしたかった。サンプルコードでは初回読み込み時は表示されない。 どうやらcssのみでは実現できず、jsで処理を書く必要があるみたい。

参考

シュッとしてジワーッと戻るCSS transitionの例