div onmouseout werkt niet

[Verwijderd]

Het volgende werkt wel:

HTML:

<div id="submenu4" class="submenu" onmouseout="menuDicht();" style="left: 300px; height: 60px; ">
Help<br>
Tell a friend<br>
About
</div>

Hij opent het menu, en als je er met de muis uit gaat, doet hij hem dicht. Dit werkt.

Maar als ik er het volgende van maak:

HTML:

<div id="submenu4" class="submenu" onmouseout="menuDicht();" style="left: 300px; height: 60px; ">
<div id="submenuItem">Help</div>
<div id="submenuItem"></div>
<div id="submenuItem">Uitloggen</div>
</div>

Dan sluit hij het menu al nadat ik over help ga (naar beneden). De hoogte van de div is toch 60px?

ik snap niet dat hij het niet doet, ik verander toch niks aan de hoogte van de div?

de css code die er nog bij hoort is:

Cascading Stylesheet:

.submenu{
  display:none; 
  z-index:2; 
  position: absolute;   
  top: 40px; 
  width: 100px;   
  border: 1px solid black; 
  background-color:white; 
  text-align:left;
  padding-left: 5px;
  padding-right: 5px;
}

#submenuItem{
  background-color:white; 
  width: 100%;
  height: 19px;
  text-align:left;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

#submenuItem:hover {
background-color: #081494;
color: white;
cursor:pointer;
}

[bRight]

Ik zie geen submenu4 terug in je css..
Daarnaast mag je een id's maar 1x gebruiken in je html.
Van submenuItem zou je dus een class moeten maken.
Let verder ook op hoofd- en kleine letters in de naamgeving van je css elementen

[Verwijderd]

Die submenu4 is om in javascript bijvoorbeeld submenu4.style.display = 'none';
aan te roepen.

Maar het rare is dat het dus zonder die submenuItem div's wel werkt (de hoofte van 60px) en dat hij daarna de mouseout al aanroept als je dus uit het eerste submenuItem help gaat.

[ Voor 49% gewijzigd door Verwijderd op 22-01-2007 14:41 ]

[crisp]

events bubblen. Een onmouseover over je #submenuItem (maak daar overigens liever een class van - id's dienen uniek te zijn in een document) zal een mouseout op de parent genereren gevolgd door weer een mouseover.
De beste manier om dat op te lossen is door menuDicht() een delay te geven mbv setTimeout en de timeout weer te cancellen indien er weer een mouseover plaatsvind.

[Verwijderd]

Oke, dus omdat die submenuItem in submenu zit, wordt de mouseout van submenu ook aangeroepen als er bij submenuItem een mouseout plaatsvind.

Dus iets in javascript met een setTimeout. zal eens even zoeken.

[djexplo]

Mousout werkt alleen op de bovenste elementen, dus is het logisch dat die mousout niet werkt nu de submenuItems over submenu4 heen liggen.

De methode die vaak gebruikt word, is het bijhouden van een timer, deze timer reset je elke keer als de muis over een menu-item heen beweegt, als de timer > 1sec dan sluit je het submenu'tje

offtopic:
edit, in vervolg toch sneller typen ..

[ Voor 8% gewijzigd door djexplo op 22-01-2007 14:45 ]

[Verwijderd]

heb nu een andere functie die wordt aangeroepen (en die roept menuDicht aan), namelijk:

JavaScript:

var TimerID;
function menuDicht2()
{
  clearTimeout(TimerID);
  TimerID =(setTimeout('menuDicht()',1000));
}

nu dacht ik, nu wordt menuDicht na een seconde aangeroepen, tenzij je weer over het menu gaat. Alleen nu gaat hij helemaal niet meer dicht:p Ookal wacht ik een hele tijd.

[djexplo]

- Kan je iets meer code geven, of een url?
- Wat voor javascript fouten krijg je volgens de browser?
- Plaats alert('testje'); in de regels tussen code, dan kan je zien of bepaalde functies worden op geroepen.
- Gebruik try en catch bij het aanroepen van " clearTimeout(TimerID); " de TimerID zal namelijk niet altijd bestaan ..

[ Voor 23% gewijzigd door djexplo op 22-01-2007 15:06 ]

[Verwijderd]

Heb even zitten kijken.
Hij lijkt nu te werken, alleen duurt het toch wel even voordat hij wordt gesloten, maarja minder als een seconden is misschien weer te kort. Dan wordt het menu weer te snel gesloten.

Is 1 seconden toch de meeste gangbare tijd?

in ieder geval bedankt voor de oplossing.