Onmouseover child div problem

I have a small div above (hover) a big one.

I assign onmouseover and onmouseout ev开发者_开发问答ents to the wrapper div.

For image caption roll-over animation.

The problem is when the mouse is above the caption itself, causing an unwanted result.

I can't understand why.

How to make it work? (no jquery)

must work on all browsers.

Demo

Update: I have added firebug console log, to a better debugging.

And discovered a new bug: sometimes when you move mouse from outside to container you get a sequence:

-I am over- -I am out- -I am over-

divSmall isn't a child of divBig, so the onmouseover event will not propagate/bubble to divBig from divSmall. This leaves you with several options:

• Make divSmall a child of divBig.
• Add the event handlers to Container.
• Add event handlers to divSmall that fire the event handlers of divBig.

Personally, I would go for options 1 or 2.