• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage onmouseover popup via css-only - tooltips?

Status
Für weitere Antworten geschlossen.

gindaisy

Neues Mitglied
Hallo ihr Lieben.
smile.png


Ich hoffe dass Ihr mir ein wenig weiter helfen könnt, den im Moment treibt mich die neue Website in den Wahnsinn.
Das Prinzip ist eigentlich ganz einfach, die Umsetzung raubt mir dafür den letzten Nerv. Link kann ich derzeit noch nicht reinstellen - ist eine Firmenwebsite und noch nicht startklar, daher hoffe ich dass das so funktioniert.
smile.png


Und zwar haben wir eine Homepage mit wordpress gebaut und soweit läuft auch alles. Jetzt allerdings möchte ich ein onmouseover per HTML / CSS einbinden. Ich habe dazu zahlreiche Tutorials gefunden, allerdings reichen meine Kenntnisse nicht aus um das alles so aufzubauen wie ich mir das vorstelle.

Dazu bitte einmal das Bild im Anhang beachten.

Es gibt 12 dieser Kästchen von denen man aktuell 1 bis 4 auf der Grafik sieht.

Ein Kästchen besteht aus:

Code:
<div class="item grid1x1">
<h2>Text Text 
1</h2>
<div class="white">1</div>
</div>

Im Prinzip möchte ich nun dass sich, wenn ich mit der Maus über das Kästchen fahre, wie auf der Grafik ein grünes Feld öffnet, mit Pfeil unten links welcher in das entsprechende Kästchen ragt, in welchem man weitere Informationen zu dem Produkt findet, dessen Foto sich eigentlich als Hintergrundbild in den jeweiligen Boxen finden sollte und sich wieder schließt, sobald ich mit der Maus das Kästchen verlasse.

Das in genau der Art für alle 12 Kästchen - das Kästchen sollte dabei eine fixe Größe haben die ich dann im Nachhinein noch selbst festlegen muss, abhängig davon wie viel Text ich benötige.

Ich bin auf der Suche nach Tooltips gestoßen, allerdings hat das hinten und vorne nicht gepasst. Ich hatte es zwar irgendwann so weit dass sich ein Popup geöffnet hat, aber nicht dort wo es sollte und der h2-Text der jetzt IN dem Kästchen ist war auf einmal ganz oben auf der Website. Also definitiv nicht da wo er hingehört...
Außerdem war das eine Lösung per a-tag. Eigentlich nicht das was ich möchte da das onmouseover für den gesamten Container gelten soll - also sowohl wenn ich über das Hintergrundbild fahre als auch wenn ich mit dem Mauszeiger die h2-Schrift berühre.

Ich hoffe, dass mir hier jemand helfen kann. Ich bin mit meinem Latein nämlich tatsächlich langsam am Ende ._.


Danke im Voraus und viele Grüße,
Daisy


attachment.php
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben