Frage von ASKER789, 28

Mit JQuery ein Popup erstellen?

Wie kann ich mit JQuery ein Popup erstellen, das ich durch hover öffnen kann und durch "nichtmehr hover" wieder verschwinden lassen kann.

Ich dachte an so was wie hier -> http://www.mediamarkt.de/?rbtc=||||b||&gclid=CMv22ofejNACFRWNGwodDt0FPA (bei "Mein Markt auswählen")

Code:


<'a class="tools" href="#toolbar">Tools</a'>

<'div id="tools-content"><'/div>


$(document).ready(function() {

$('.tools').mouseover(function() {

$('#tools-content').show();

});

});


Jetzt ist meine Frage: Wie muss ich, um das Ergebniss zu erhalten, dass wenn ich nicht mehr mit der Maus über dem Link ODER über dem popup bin, der Popup sich schließt.

Ps: Mir ist .mouseout() sehr wohl bekannt aber wenn ich es anwende dann schließt sich das Popup und öffnet sich dann ganz schnell wieder, wenn ich mit der Maus erst über den Link fahre dann über das aufgeklappte Fenter und dann zurück zum Link. Das möchte ich vermeiden

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Berny96, 14

Wenn das Popup ein Kindelement von dem Button ist so zählt der Hover auch auf ihn. Damit würdest du eigentlich auch schon dein Problem lösen. Also, den Button und den Popup in ein div packen und den hover dann auf das div setzen. :)

Kommentar von ASKER789 ,

Danke! Heißt also um beides ein Divtag und den bei .mouseout diesen angeben. :D Danke

Kommentar von Berny96 ,

Genau ;)

Kommentar von ASKER789 ,

Jetzt noch was. Wie würde es dann mit click funktionieren. Also z.B. .outsideclick() oder so

Kommentar von Berny96 ,

Da gibt es eher keine so elegante Lösung. Du könntest ein Click auf jeweils Body und deinen Div machen. Im Body Click hidest du den popup und im popup click unternimmst du erstmal nichts. Der muss nur da sein damit er den Click von Body überschreibt weil ja sonst auch der mit eingeschlossen wäre da er ja ein Kind Element ist. Umgesetzt habe ich das so noch nicht aber ich denke so sollte es funktionieren.

Antwort
von PeterKremsner, 17

http://cssmenumaker.com/menu/textured-responsive-drop-down-menu

Nur zur Info die Taktik mit hover events ist nur für Desktop PCs geeignet Tablets oder Smartphones mit Touchscreen können die Seite dann nur Mittelmäßig verwenden.

Kommentar von ASKER789 ,

Ich hatte eher eine Erklärung erwartet und nicht einen Link mit dem ich nichts anfangen kann

Kommentar von PeterKremsner ,

Warum nimmst du nicht einfach ein Jquery Plugin so wie in dem Link?

Warum das Rad neu erfinden wenn es anders auch geht.

Da hast du noch ein paar andere:

http://www.jqueryrain.com/example/jquery-menu-example/

Kommentar von Berny96 ,

Weil er versucht zu verstehen wie man denn sowas umsetzen würde. Er will dazu lernen. 

Kommentar von PeterKremsner ,

Ich habe die Frage eher so aufgefasst, dass er dieses Verhalten für eine Webseite von ihm einfach nur erreich will.

Wenns um den Lerneffekt geht ist es natürlich etwas anderes, trotzdem kann man aus der Umsetzung anderer schon mal viel herauslesen wie es gemacht wird und was die Probleme daran sind etc.

Keine passende Antwort gefunden?

Fragen Sie die Community