jqueryで、メニューアイコンをクリックした時にメニュー画面をヌルっと表示させるようにしていたのだけど、クリックがめんどくさいのでマウスをホバーした時も同じようにヌルっと表示させるようにしようとした。
そしたら落とし穴にハマった！（汗）
毎回、すごく安易に陥りやすくて、確か以前も時間を取られた気がするからメモしておく。
なお、on()に限らず、bind()やlive()でも同じ現象が発生する模様。
まず、こちら。↓
NGパターン（動作しない）
$("#test").on('click hover', function() {
// クリックやマウスが乗っかった時の処理
});ブラウザで動作確認をしてみると・・・、動かない！（怒）
「.on('click hover'～」って、ちゃんと設定しているのに！！
OKパターン（正解はこちら。）
$("#test").on('click mouseenter', function() {
// クリックやマウスが乗っかった時の処理
});hoverじゃなくて、「mouseenter」が正解でした。
ちなみに「mouseover」でもイケる。
（厳密に言うと、mouseoverとmouseenterでは挙動が違う場面もある。要素が入れ子の場合などで。）
on()では「hover」イベントは使えないそうです。公式ページでの詳細説明
（注： .hover()は従来通り使える。）
なお、スマホでは、これだけでは上手く動作しない模様。
その件については、別記事に書いてます。
こちらからどうぞ。 ↓
jQueryで、on()にclickとtouchstartを併記したら、スマホでのタップイベントの動作がおかしくなった