Mouseenter is never triggered when entering through disabled child element

Question

I have a gray div with a disabled checkbox in it.

http://jsfiddle.net/hFPTU/1/

I also have blue div that is positioned over the gray box, but below the checkbox.

A third div is updated with text when mouseenter and mouseleave events are triggered on the gray box. Mouse into gray box -> "ENTER". Mouse out of gray box -> "LEAVE"

Everything works just as expected, except for when you enter the gray box through the disabled checkbox.

1. Move mouse over blue box
2. Move mouse over checkbox
3. No Mouseenter event is triggered.

Why does this happen?

Answer 1

That checkbox exists in the blue box div having class 'a' .
When your mouse enter through that checkbox inside that blue box, mouseenter event is supposed to be fired at that time but since jquery does not support events on disabled elements so event is prevented.

Your code is working fine as expected well.

For more details, you can refer these links:

http://bugs.jquery.com/ticket/11382

Event on a disabled input