jQuery::mouseleave マウスアウト(mouseout)を上手にとる

mouseoutの代わりにmouseleaveを使うと楽できます。

DOMLevel3で追加になったイベントのようで、マウスオーバー/マウスアウトは内包した要素(li)のイベントもバブリングで親要素(ul)に伝搬されていて処理が煩雑になっていたものをスマートに採取できるようになります。

<ul>
 <li><a href="">aaaa</a></li>
 <li><a href="">bbb</a></li>
</ul>

こんな構造のメニューをアコーディオンするときに、ulタグのマウスオーバー/マウスアウトで制御しようとするとバブリング制御に苦労するので、マウスエンター/マウスリーヴを使うと幸せになれます。