Mouseleaveイベントは、イベントバブリングの処理方法がmouseoutと異なります。この例でmouseoutが使用されている場合、マウスポインターがInner要素から移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。一方、mouseleaveイベントは、マウスが子孫ではなく、バインドされている要素から離れたときにのみハンドラーをトリガーします。そのため、この例では、マウスが内部要素ではなく外部要素を離れると、ハンドラーがトリガーされます。
mouseoutよりもmouseleaveが適切な場合があります。
たとえば、mouseenterの要素の横に表示するツールチップを作成したとします。 setTimeoutを使用して、ツールチップがすぐにポップアップしないようにします。 mouseleaveを使用してclearTimeoutのタイムアウトをクリアすると、マウスがツールチップから離れると表示されなくなります。 これは、99％の時間で機能します。
ただし、ツールチップが添付されている要素がclickイベントを持つボタンであり、このボタンがconfirmまたはalertのいずれかでユーザーにプロンプトを出すと仮定しましょう。ボックス。ユーザーがボタンをクリックすると、alertが起動します。ユーザーがそれを十分に速く押して、ツールチップがポップアップする機会がありませんでした（これまでのところ）。
ユーザーがalertボックスの[OK]ボタンを押すと、マウスが要素から離れます。しかし、ブラウザページはロックされた状態になっているため、[OK]ボタンが押されるまでjavascriptは起動しません。つまり、mouseleaveイベント 消火しない。ユーザーが[OK]を押すと、ツールチップがポップアップします（これは望みのものではありません）。
この場合、mouseoutを使用するのが適切なソリューションです。
jQuery APIドキュメント：
mouseout
このイベントタイプは、イベントのバブルのために多くの頭痛の種を引き起こす可能性があります。たとえば、この例でマウスポインターがInner要素の外に移動すると、mouseoutイベントがその要素に送信され、その後、Outerにトリクルされます。これは、都合の悪いときにバインドされたmouseoutハンドラーをトリガーできます。有用な代替手段については、.mouseleave（）の説明を参照してください。
したがって、mouseleaveは、上記の理由により設計されたカスタムイベントです。
イベントMouseoutは、マウスが選択された要素から離れたときにトリガーされ、マウスがその子要素から離れたときにもトリガーされます。
イベントMouseleave要素は、ポインターが選択された要素のみを離れるとトリガーされます。
リファレンス： W3School