Mit Javascript Div enblenden

Hallo,

ich habe mir im Internet schon die Finger wundgegoogelt aber leider nichts passensendes für mein Problem gefunden.

Ich muss über eine Navigation einen anderen Div einblenden, bzw durch einen Hover anzeigen lassen. Ich habe im Internet hierzu auch viel gefunden, leider ist mein problem aber das dass der anzuzeigende Div sich außerhalb der Navigation befindet. Es ist eine reine CSS Lösung so leider nicht möglich und ich muss das also evtl. mit einem Javasript bewerkstelligen. Hat evtl. Jemand hierzu eine Lösung?

Beispiel:

Das ist die Navigation
<ul><li>blabla1</li><li>blabla2</li><li>blabla3</li></ul>


Diese Divs sollen dann angesprochen werden:
<div class="blabla1"></div>
<div class="blabla2"></div>
<div class="blabla3"></div>

PS. Ich kann das ganze aus bestimmten Gründen nicht so verschachteln das die Divs sich innerhalb der passenden <li> befinden

also zunächst würde ich den Seiten eine eindeutige CSS-Klasse in der Seitenstruktur verpassen.
Die wird dann dem <li> automatisch hinzugefügt.

den <div> würde ich die jeweils gleiche Klasse wie dem zugehörigen <li> geben und eine allgemeine Klasse wie "navHover"

dann hättest du z.B.

HTML-Code:

---

<li class="home">...</li>

---

und

HTML-Code:

---

<div class="navHover home">Blubber</div>

---

dann kannst Du mit jQuery folgendes machen:

Code:

---

$('.mod_navigation li').mouseenter(function() {
    $('.navHover.' + $(this).attr('class')).show();
});

---

edit:
wenn Du es wirklich so lassen willst, dass die Klasse des <div> mit dem Inhalt des <li> übereinstimmt, dann sähe das in jQuery so aus:

Code:

---

$('.mod_navigation li').mouseenter(function() {
    $('div.' + $(this).html()).show();
});

---

Hallo,

werde ich nacher gleich einmal einbauen und probieren.

Ich melde mich dann

Hallo,

leider funktioniert das nicht, bei dem ersten Script passiert nichts und beim zweiten gibt es einen Fehler:

HTML-Code:

---

Error: Syntax error, unrecognized expression: div.
                                                                                          <a>Prints</a>
       

....value:null},st.error=function(e){throw Error("Syntax error, unrecognized expres...

---

kann man sich das live irgendwo anschauen?

Hallo,

ja...

Es geht um den Produktslider und zwar soll das jetzt offene Produktfenster zu sein wie alle anderen und nur beim Hover soll das jeweilige Fenster geöffnet werden. Ich muss dann dazu noch den jetzigen Code usw. dort dann rausnehmen.

https://www.digiphotopro.de/test-slider

ah das ist also keine Contao Navi, sondern was selber gebautes...

In jQuery wäre der Code für den poster button:

Code:

---

jQuery('#pg_btn_poster').mouseenter(function() {
    jQuery('.products .product_group').hide(); // erstmal alle verstecken
    jQuery('#grp_poster').show();
});

---

dann müsstest Du das für alle Buttons kopieren und anpassen, oder das generisch machen und die ID des divs aus der des li heraus wursteln.

Hallo,

TOP.... ich habe das gerade eingebaut und es funktioniert mit dem Hover so wie soll. Leider habe ich jetzt das Problem das wenn ich dort mit der Maus kein Hover erzeuge trotzdem immer die zu letzt aktive Produktgruppe zu sehen ist, es soll aber nicht zu sehen sein.

ja, da musst Du noch was dazu machen:

Code:

---

jQuery('li.pgroup').mouseleave(function() {
    jQuery('.products .product_group').hide(); // wenn die maus nicht über einem <li> ist, dann sind keine <div> zu sehen
});

---

Hallo,

ich bin ein absoluter Anfänger... kannst Du mir einmal den Code kommplett darstellen (zusammengesetzt), also wie dieser dann im ganzen aussehen müsste.

jQuery('#pg_btn_poster').mouseenter(function() {
jQuery('.products .product_group').hide(); // erstmal alle verstecken
jQuery('#grp_poster').show();
});

jQuery('li.pgroup').mouseleave(function() {
jQuery('.products .product_group').hide(); // wenn die maus nicht über einem <li> ist, dann sind keine <div> zu sehen
});

Hallo,

alles klar... war ein Gedankenfehler, ich brauche den Code ja nur einmal.

Da ich nun aber 5x den gleichen Code bei den erstens habe ist meine Frage ob man da nicht nur einen mit den 5 Abfragen machen kann?

HTML-Code:

---

jQuery('#pg_btn_poster').mouseenter(function() {
jQuery('.products .product_group').hide(); // erstmal alle verstecken
jQuery('#grp_poster').show();
});

---

HTML-Code:

---

jQuery('#pg_btn_fineart').mouseenter(function() {
jQuery('.products .product_group').hide(); // erstmal alle verstecken
jQuery('#grp_fineart').show();
});

---

usw.

Sorry,

aber ich habe jetzt nach dem einbau festgestellt, das ich jetzt mit der Maus nicht mehr auf die Produkte komme, denn sobald ich den "li" verlasse geht das Fenster zu. Ich habe also keine Chance dort die Produkte auszuwählen.

HTML-Code:

---

https://www.digiphotopro.de/test-slider

---

dann lass doch einfach das Letzte eingeblendet, so wie es vorher war.

Hallo,

nein das geht nicht. Ich muss dann versuchen da eine andere Lösung hinzubekommen. Ich dachte das es evtl. eine Möglichkeit gibt, das man das schließen verzögern kann.

Verzögern sollte schon gehen. So oder so ähnlich z.B. mit 5 Sekunden Verzögerung. Weiss aber nicht, ob sich das dann eventuell mit dem Einblenden eines anderen Menüpunkts beisst.

Code:

---

jQuery('li.pgroup').mouseleave(function() {
    jQuery('.products .product_group').delay(5000).hide(); // wenn die maus nicht über einem <li> ist, dann sind keine <div> zu sehen
});

---

Hallo,

danke für die Hilfe... ich habe das gerade eingebaut, habe aber leider keinen delay dort

Hallo,

also das mit dem delay habe ich jetzt hinbekommen, allerdings besteht nun das Problem darin das sich das Fenster auch nach 5 Sekunden schließt wenn ich mich mit der Maus auf dem li befinde. Eigentlich sollte es dann ja offenbleiben.

Wenn es in der mouseleave(function) drin ist, dürfte das eigentlich erst 5 Sekunden nachdem die Maus raus ist passieren.
Eine alternative Möglichkeit wäre vielleicht noch, den Selektor für die mouseleave(function) auf die Produkte selbst zusätzlich zu erweitern. Dann würde das (hoffentlich) erst passieren, wenn die Maus auch nicht mehr über dem eingeblendeten div steht. Jedenfalls dann, wenn sich die Bereiche überlappen. Aber ich bin jetzt nicht unbedingt der jQuery Spezialist. Kann man sicher alles noch verfeinern, verbessern oder ganz anders lösen.