LoginSignup
2

More than 5 years have passed since last update.

マウスホバーで離れた位置になにか表示したいときの便利ワザ

Last updated at Posted at 2018-12-19

マウスホバーで別の要素を表示することってありますよね。
(カテゴリメニューの子カテゴリとか、別のアクションをするボタンやリンクを表示したりとか)

次のGIFでは、要素の外にマウスカーソルがいったときにすぐ消えてしまっています、とても残念な感じです。
これをいい感じにする便利ワザの紹介です。
※サンプルはVue.jsですが他のライブラリでも似たような感じになるのかな、と思います。

CodePen - Vue hover bad pattern.gif

パターンA :hover を使う

デフォルトで display: none; にしといて :hover がついたら display:block に切り替えて表示しています。

See the Pen Vue hover bad pattern by Tatsuya Nakano (@howdy39) on CodePen.

このパターンの問題点

要素外に出た瞬間にホバーが外れます。
そのため、ホバーで出てくる要素が離れていたりするとUXがとても悪いです。

CodePen - Vue hover bad pattern.gif

パターンB @mouseenter, @mouseleave を使う

Vueの @mouseenter, @mouseleave を使ったパターンです。
これも先程の :hover と同じ挙動になってしまうためUXがとても悪いです。

See the Pen Vue hover good pattern step1 by Tatsuya Nakano (@howdy39) on CodePen.

パターンC パターンBに debounce を組み合わせたパターン

先程の @mouseenter, @mouseleave に加えて debounce を組み合わせたパターンです。
ここでは debounce の実装に Lodash を使いました。

See the Pen Vue hover good pattern step2 by Tatsuya Nakano (@howdy39) on CodePen.

上記コードの場合、要素を離れて(mouseleave)してから500ms後に要素にホバーがあたっていないときだけホバーを消すという処理をしています。
「消えるんかい!!」っていうイライラがなくなりますね。

CodePen - Vue hover good pattern step2.gif

あとがき

もっといい方法あるよって人はコメントくれると嬉しいです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2