div i div och mouseover

Jag har en div som i sin tur innehåller andra div:ar

<div onMouseOut="alert('div1');">
   <div onMouseOver="this.style.backgroundColor='#FF0000';" onMouseOut="this.style.backgroundColor='#00FF00';">Test1</div>
<div onMouseOver="this.style.backgroundColor='#FF0000';" onMouseOut="this.style.backgroundColor='#00FF00';">Test2</div>
</div>

När man för musen över t.ex test1, så triggas både mouseover på "test1" och mouseout på "div1" (yttre diven)
I min mening så går man inte ut ur den diven förens man lämnar ytterkanterna, men så var tydligen inte fallet...

Går det att komma runt detta på något vis?

Scriptfrågor får nog bättre svar i rätt forum ;)

Flyttas från HTML, XHTML & CSS

/Jarvklo - Moderator HTML, XHTML & CSS

Hittade svaret...

Det jag sökte var OnMouseLeave

IE/Win only lösning dock.

För att svara på din ursprungliga fråga: Anledningen till att alert()-funktionen körs är att onmouseouthändelsen bubblar uppåt i nodhierarkin vilket innebär att även dessa noders ditohändelse aktiveras. För att hindra detta måste man alltså stoppa det här fenomenet.

En lösning kan se ut på följande vis:

function f(obj, evt) {
    evt = evt || window.event;

    if (typeof evt.stopPropagation != "undefined") evt.stopPropagation();
    else if (typeof evt.cancelBubble != "undefined") evt.cancelBubble = true;

    obj.style.backgroundColor = "#0f0";
}

...

<div onMouseOut="alert('div1');">
    <div onMouseOver="this.style.backgroundColor='#FF0000';" onMouseOut="f(this,event)">Test1</div>
    <div onMouseOver="this.style.backgroundColor='#FF0000';" onMouseOut="f(this,event)">Test2</div>
</div>

:)