Cancel OnMouseOver Event

[GreatMetro]

Hello everyone,
I have a container div that has an onmouseout event that basically shrinks it's size, and within this div, I have two block level elements, a nested div and an image. What's happening is while the mouse is still within the container div, and mouseover's either the nested div or the image, it triggers the onmouseout event on the container event.

For an example, see http://unixpapa.com/js/testover.html

How can I cancel the onmouseout event when it goes into the nested block elements, but keep it active for when the mouse actually leaves the outside edge of the container div?

Reps to the first fix!

Thanks

[LogicFlux]

You could maybe check if the element that's been moused into is a child of the outer container, and if it is use event.preventDefault() in the mouseout event handler of the outer container. I'm not sure this approach would work though because it depends on the order of how the events are fired. If the mouseout event is fired first(and it probably is) then this approach probably won't work. But there may be some creative way to get around it.
I'm not sure what the browser support is like for preventDefault() because I use it with YUI so any cross-browser problems are probably taken care of.

[LogicFlux]

A way to get around the "order of events" problem might be to use preventDefault() by default in the mouseout event handler. Then in the mouseover event handler of parent of the outer container, you could fire a mouseout event for outer container and set a special property on the object that the outer container's mouseout event handler would check for. Or you could send an argument with a special value to the event handler.
I use YUI events and they let you send whatever arguments you want, but I'm not sure you can fire built-in events like mouseover and mouseout, but you probably can.