吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

jQuery .mouseenter() / .mouseleave() と .mouseover() / .mouseout() の違い

2013年8月23日 / category : jquery, lab, reference-jquery

.mouseenter()
→ マウスが要素に入ったときにイベントが発生する

.mouseleave()
→ マウスが要素から外れたときにイベントが発生する

.mouseover()
→ マウスが要素にオーバーしたときにイベントが発生する

.mouseout()
→ マウスが要素からアウトしたときにイベントが発生する

これだけでは、.mouseenter()と.mouseover()、.mouseleave()と.mouseout()の違いがわかりませんね。
demoを作成しました。
demo

このdemoを見るとわかるように、各イベントのカウント数に違いが出てくると思います。
.mouseenter()は、子要素にマウスが入っても、.mouseleave()されません。
.mouseover()は、子要素にマウスが入ると、自身はアウトされたと処理され、.mouseout()されます。
これが、.mouseenter() / .mouseleave() と .mouseover() / .mouseout() の違いとなります。