search
LoginSignup
2

More than 3 years have passed since last update.

posted at

updated at

Organization

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

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

次の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
What you can do with signing up
2