div i div och mouseover

4 svar · 250 visningar · startad av Jaar 4 maj 2004

JaarMedlem sedan juli 2001434 inlägg

Frågan4 maj 2004 07:09#1

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?

jarvkloMedlem sedan juli 20013 378 inlägg

4 maj 2004 07:25#2

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

Flyttas från HTML, XHTML & CSS

/Jarvklo - Moderator HTML, XHTML & CSS

JaarMedlem sedan juli 2001434 inlägg

4 maj 2004 07:31#3

Hittade svaret...

Det jag sökte var OnMouseLeave

PepeJeriaMedlem sedan feb. 2003774 inlägg

4 maj 2004 16:04#4

IE/Win only lösning dock.

Peter SMedlem sedan dec. 20025 483 inlägg

4 maj 2004 18:06#5

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>