CSS div Positionierungshilfe
Ich brauche etwas Hilfe bei der Positionierung von divs, die auf jedem Hover-Ereignis der # Box erscheinen. Die versteckten divs sollten über dem Feld angezeigt werden, das so schwebte, dass:
- Jeder #tooltip-div deckt die Box ab, die verschoben wurde, und die Box daneben
- Die Tooltips der Boxen 1 & amp; 2 sollte die Felder rechts abdecken
-
Tooltips für Box 3 & amp; 4 sollte die Boxen zu ihrer Linken abdecken
(Um es verständlicher zu machen, sehen Sie bitte das beigefügte Bild - Es wird mehrere Reihen von Kästchen geben, so dass die Positionierung relativ sein sollte und nicht auf die Seitenabmessungen festgelegt sein sollte (ich nehme an)
Bisher ist es mir nicht gelungen, die # tooltip-Positionierungen richtig zu machen (ich weiß, dass man absolut und der andere relativ sein sollte, aber egal, meine Bemühungen, ich habe es noch nicht genagelt).
Hier ist ein jsfiddle , an dem ich arbeiten kann und das ist das Ergebnis, nach dem ich gesucht habe:
3 Antworten
Ich habe eine Geige zusammengestellt, von der ich denke, dass sie das erreicht, was du beschreibst.
Die Idee dahinter ist, dass ich einen Wrapper um die Box und den Tooltip lege. Dann höre ich auf die Maus-Hover-Ereignisse auf dem Wrapper statt der Box und dessen Tooltip einzeln. Auf diese Weise vermeiden wir Flackern, wenn der Tooltip angezeigt wird, und damit das Element, das anfänglich schwebte, abgedeckt wird.
Wenn Sie die Position der Wrapper relativieren, können Sie den Tooltip absolut relativ dazu positionieren. Mit einer kleinen if-Anweisung in Ihrem jQuery-Hover-Callback können wir dann feststellen, ob der Tooltip mit der linken oder rechten Seite der Box ausgerichtet werden soll.
Den Code aus der Geige auch in die Antwort einfügen, wenn die Geige aus irgendeinem Grund verschwinden würde.
Auszeichnung:
%Vor%CSS:
%Vor%jQuery:
%Vor%Aktualisierung:
Wenn Sie es in mehr als einer Reihe von Boxen verwenden, müssen Sie die if-Anweisung etwas verbessern, um dies zu berücksichtigen.
Sie können dies in CSS selbst tun, indem Sie die Auswahl "Hover" und "nth-of-type" verwenden.
Wählen Sie jede dritte Zeile aus:
%Vor%und vierter in Zeile:
%Vor%Und geben Sie der Fly-Out-Box die notwendigen Eigenschaften.
Demo: Ссылка
Auszeichnung:
%Vor%css:
%Vor%In Ihrem Markup befand sich der "Tool-Tipp" außerhalb der Box und er hatte 'Sichtbarkeit: versteckt', was ziemlich ähnlich ist wie 'Opazität: 0'. Obwohl es nicht gesehen werden kann, ist es immer noch da. Um es für das Layout nicht verfügbar zu machen, brauchen Sie 'display: none', aber dann können Sie es nicht richtig mit CSS-Übergängen animieren.
Hinweis: Wie Christofer Eliason im Kommentar unten erwähnt, wird der Selektor ': n-th-type' nicht sehr gut unterstützt. Sie können also jedem div-Objekt, das Sie möchten, eine Klasse hinzufügen fly-out, um rechtsbündig zu sein oder eine jquery-Version von 'nth-of-type' zu verwenden: Ссылка .
Ich habe den Selektor ': nth-of-type' verwendet, weil Sie die Ausrichtung des Flyouts vom CSS selbst aus steuern können, ohne eine Klasse zu neuen Boxen hinzufügen zu müssen, wenn sie dynamisch hinzugefügt werden, was mathematisch ein bisschen komplex sein kann (zumindest für mich).
Aber wenn Sie damit einverstanden sind, habe ich eine Klasse "rechtsbündig" zu den Boxen in 3. & amp; 4. in jeder Zeile, Sie können diesen Block in der CSS löschen und Sie sind immer noch gut:
%Vor%