[JS] <div> verbergen met onMouseOut

[GewoonNico]

Ik ben bezig met een menu voor op mijn website. Het idee is ongeveer hetzelfde als het Tweakers.net menu. Maar dan zonder al die javascriptjes en dergelijke. Het moet gewoon een simpel menu zijn.

het script dat ik nu gebruik gaat als volgt:

PHP:

echo("      
        <a href=\"?pid=main/home\" onMouseOver=\"document.getElementById('menu_home').style.display='block';\">Begin</a>
        <div id=\"menu_home\" onMouseOut=\"document.getElementById('menu_home').style.display='none';\" style=\"
            display: none;
            z-index: 2;
            background-color: #FFFFFF;\">
            <a href=\"?pid=main/home\">Beginpagina</a><br>
            <a href=\"test\">Test</a><br>
            <a href=\"test\">Test</a><br>
        </div>");

Het menu werkt zoals het moet werken, er zit alleen 1 klein probleem in. De onMouseOut functie werkt niet goed.Ofja, te vroeg.
Zodra ik over een link ga met mijn muis, en dan van die link af ga wordt het menu verborgen. Dit is niet de bedoeling.

Hoe kan ik dit oplossen?

[ Voor 19% gewijzigd door GewoonNico op 20-02-2005 12:15 ]

[ZeilDude]

Waarom staat je onmouseout in regel 3, en niet in regel 2?
Dus waarom in de <div> en niet in de <a>?

[GewoonNico]

Het menu moet pas verbergen wanneer je uit de div gaat.

[Zoefff]

Omdat 'ie anders alleen maar voor de tekst in het <a> element geld, en ik kan me voorstellen dat het menuitem hoger en/of breder is.

En @ TS, dit moet je oplossen met een timer-functie ofzo, maar hoe precies weet ik niet. Misschien dat je eens kan spieken op t.net

[swartmans]

Zo werkt ie bij mij.. maar pas op voor IE en andere explorers..

HTML:

<a href="?pid=main/home" onMouseOver="document.getElementById('menu_home').style.display='block';">Begin</a> 
        <div id="menu_home" onMouseOver="document.getElementById('menu_home').style.display='block';" onMouseOut="document.getElementById('menu_home').style.display='none';" style=" 
            display: none; 
            z-index: 2; 
            background-color: #FFFFFF;"> 
            <a href="?pid=main/home">Beginpagina</a><br> 
            <a href="test">Test</a><br> 
            <a href="test">Test</a><br> 
        </div>

[GewoonNico]

swartmans schreef op zondag 20 februari 2005 @ 12:47:
Zo werkt ie bij mij.. maar pas op voor IE en andere explorers..

HTML:

<a href="?pid=main/home" onMouseOver="document.getElementById('menu_home').style.display='block';">Begin</a> 
        <div id="menu_home" onMouseOver="document.getElementById('menu_home').style.display='block';" onMouseOut="document.getElementById('menu_home').style.display='none';" style=" 
            display: none; 
            z-index: 2; 
            background-color: #FFFFFF;"> 
            <a href="?pid=main/home">Beginpagina</a><br> 
            <a href="test">Test</a><br> 
            <a href="test">Test</a><br> 
        </div>

Bij mij werkt ie nog niet helemaal goed. Ik heb de laatste IE.

Op Tweakers.net gebruiken ze een area. Dit is natuurlijk ook een oplossing. Maar wel lastig als je een variabele menu lengte hebt....

[Not Pingu]

Events zoals OnMouseOut 'bubbelen' omhoog zoals dat heet; het wordt doorgegeven aan het parent-element. Als een <a> in een <div> een onmouseout krijgt, wordt die automatisch doorgegeven naar de <div>.

Beter kun je het hiden van het menu ergens anders door laten triggeren, bijv. door een onmouseover op een element dat visueel onder het menu ligt. Ook zou je een gestylde <ul> kunnen overwegen zoals dat op T.Net gebeurt: events in een <ul> worden volgens mij niet gebubbled omdat ze in de <li> blijven steken. Kijk ook eens naar Suckerfish dropdowns, een link die al duizenden keren op GoT is langsgekomen.

[faabman]

lees anders even http://www.quirksmode.org/js/introevents.html en bijbehorende pagina's door, daar staat een hoop informatie op over de manier waarop verschillende browsers met events omgaan...

[GewoonNico]

Thanx ! Superb!