Archief - onmouseout afhankelijk van het nieuwe element

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
K

Korneel.

Legacy Member
Wanneer de gebruiker met de cursor over het element #user beweegt, wordt het element #overlay zichtbaar. #user grenst aan #overlay. Wanneer de gebruiker de cursor van een van deze elementen weg beweegt (onmouseout) naar een willekeurig ander element (dus niet naar #user of naar #overlay), moet het element #overlay weer verdwijnen.

Momenteel luister ik naar "onmouseout" events van #user en #overlay en laat ik #overlay verdwijnen wanneer deze voorkomen.

Het probleem is nu wanneer de gebruiker de cursor van #user naar #overlay beweegt. Dan verdwijnt #overlay immers.

Hoe kan ik ervoor zorgen dat #overlay enkel verdwijnt wanneer de cursor van #user of van #overlay (of een van hun kinderen) naar een willekeurig ander element verplaatst wordt?

Op deze manier beschik je over het element van waar de cursor komt en het element waar de cursor naartoe bewogen werd:
Code: 
hideUserMenu = function(e) {
  var previousElement = e.target;
  var currentElement = (e.toElement || e.relatedTarget);
}
F

Fr3aK

Legacy Member
Het zal wel te implementeren zijn met JavaScript alleen maar met jQuery kunt ge zoiets met een paar lijntjes code in elkaar steken.

Code: 
$("#user").bind("mouseenter mouseleave", function () {
  $("#overlay").toggle();
});
Wel zien dat je #overlay div in de #user div staat.
K

Korneel.

Legacy Member
Fr3aK zei:
Het zal wel te implementeren zijn met JavaScript alleen maar met jQuery kunt ge zoiets met een paar lijntjes code in elkaar steken.

Code: 
$("#user").bind("mouseenter mouseleave", function () {
  $("#overlay").toggle();
});
Wel zien dat je #overlay div in de #user div staat.
Klik om te vergroten...

#overlay staat niet in #user, omdat #overlay gebruikt wordt voor alle "overlays" (dus voor alle uitklapbare delen). Het is inderdaad een goede suggestie om #overlay in #user te zetten. Maar toch had ik het liever anders opgelost.

Is het ook mogelijk als #overlay niet in #user staat?

(Ik gebruik YUI3, maar met jQuery heb ik ook enige ervaring.)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan