CODEWITHSUNDEEP
javascriptevents
luppi
luppi

Reputation: 301

Onmouseover child div problem

I have a small div above (hover) a big one.
I assign onmouseover and onmouseout events 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-

Upvotes: 2

Views: 287

Answers (1)

Andy E
Andy E

Reputation: 344497

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.

Upvotes: 2

Related Questions