Wie lässt sich der Text beim Überstreichen über die Spalte bewegen?
Ich möchte etwas Text über die Spaltenkante gleiten lassen, wenn ich mit der Maus darüber blicke, genau wie meine IDE:
Hier ist das, was ich bisher habe .
Ich kann es über die Kante schweben lassen, wenn ich die Elementpositionierung in absolute ändere, aber dann "keinen Platz einnimmt".
Ich hätte auch nichts dagegen, die Grenze um das schwebende Bit herum zu haben.
Hat jemand irgendwelche Ideen, wie man das erreicht?
2 Antworten
Ich habe es versucht und eine Lösung entwickelt, die keinerlei Änderungen erfordert. Ich habe einige Tests durchgeführt und es scheint in Chrome 26 ,
Es sieht so aus:
Grundsätzlich habe ich float:left auf li und dann width:auto auf li:hover gesetzt, um sicherzustellen, dass der Text über der Spaltenkante schwebt.
Um den Rahmen hinzuzufügen, rendere ich ein Pseudo-Element direkt nach dem li , das die Breite des vorhergehenden li erbt. Dann habe ich seine Grenzen, Ränder, Höhen und Linienhöhen gesetzt, um dieses Pseudo-Element über den Anfang des vorhergehenden li zu positionieren. Ich habe margin-left auf 150px gesetzt, um sicherzustellen, dass es nur hinter li angezeigt wird, die die Breite der Spalte überschreiten.
Um etwas Platz auf der rechten Seite hinzuzufügen, habe ich white-space: no-wrap auf white-space: pre geändert, was etwas zusätzlichen Leerraum innerhalb der li enthält (wenn es hinzugefügt wird, ist es keine Voraussetzung, ich habe es hinzugefügt damit es ein wenig hübscher aussieht).
Hier ist ein jsFiddle .
Hier ist der HTML-Code:
%Vor%Und hier ist das CSS:
%Vor%AKTUALISIEREN
Ich habe den Micro-Clearfix-Hack auf den div eingefügt, nun passt er seine Höhe basierend auf seinem Inhalt an anstatt dass es eine feste Höhe hat.
UPDATE 2
Das Problem beim Scrollen besteht darin, dass sich die Breite des enthaltenden Elements tatsächlich ändert, wenn width:auto auf die untergeordneten Elemente gesetzt wird, da sich die Bildlaufleiste auf der rechten Seite befindet und sich weiterbewegt. Ich habe versucht, einen zusätzlichen Wrapper div , aber es scheint, dass es unmöglich ist, Zeug über den oberen Rand einer Bildlaufleiste zu schweben, von irgendwo innerhalb des Elements, das die Bildlaufleiste erstellt. Die einzige Möglichkeit, das Scrollen zu ermöglichen, besteht darin, overflow:hidden auf ul zu setzen und dann das jQuery ScrollTo Plugin zu verwenden um innerhalb von ul nach oben und unten zu scrollen.
Ich habe zwei Möglichkeiten gefunden, dies zu unterstützen. Die erste erfordert das Hinzufügen von span-Tags in jedem li, aber es scheint über alle Browser hinweg zu funktionieren. Die zweite funktioniert mit dem Markup genau wie Sie es haben, funktioniert aber nicht in Chrom und Safari.
Alle Browser:
Diese Lösung ist extrem einfach und basiert im Wesentlichen auf:
%Vor%Alle außer Webkit-basierten Browsern (Chrome, Safari):
Dies ist viel hackier und erfordert, dass Sie die Breite und den Anzeigetyp des Li ändern und dann dazu zwingen, die Linie zu brechen. Der li: hover sieht ungefähr so aus:
%Vor%Das Take-Away in beiden sollte Position sein: Absolut funktioniert nicht gut, wenn Sie versuchen, die natürliche Ordnung zwischen den Elementen zu bewahren.