マウスホバーで別の要素を表示することってありますよね。
（カテゴリメニューの子カテゴリとか、別のアクションをするボタンやリンクを表示したりとか）
次のGIFでは、要素の外にマウスカーソルがいったときにすぐ消えてしまっています、とても残念な感じです。
これをいい感じにする便利ワザの紹介です。
※サンプルはVue.jsですが他のライブラリでも似たような感じになるのかな、と思います。
パターンA :hover を使う
デフォルトで display: none; にしといて :hover がついたら display:block に切り替えて表示しています。
See the Pen Vue hover bad pattern by Tatsuya Nakano (@howdy39) on CodePen.
このパターンの問題点
要素外に出た瞬間にホバーが外れます。
そのため、ホバーで出てくる要素が離れていたりするとUXがとても悪いです。
パターン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後に要素にホバーがあたっていないときだけホバーを消すという処理をしています。
「消えるんかい！！」っていうイライラがなくなりますね。
あとがき
もっといい方法あるよって人はコメントくれると嬉しいです。