CSS Bei :hover Größe ändern und position:absolute setzen

[Timdaroxxa]

Hey Leute,
mal wieder ne Frage von mir, diesmal zum Thema CSS.

Erstmal meine Ausgangssituation:

<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

(innerhalb von .wrapper beliebig viele .item)

Wobei jeweils zwei .items nebeneinander angeordnet sind. (So also sieht es nachher aus :: ) Die .items haben eine feste width.
Nun möchte ich bei .item:hover gerne

 width: auto;

setzen, um zusätzlichen Inhalt preiszugeben.
Klar ist: Nun verschieben sich alle anderen .item s auch, da das aktuelle mit :hover jetzt größer geworden ist.

Wie schaff ich es, die Positionen der anderen .items gleich zum Ursprung zu lassen und nur das ausgewählte .item zu vergrößern, ohne dass sich die anderen verschieben?

Meine Idee war bisher position:absolute; das Problem ist dann natürlich, dass es aus dem Fluss rausgelöst ist und ich einen Dummy erzeugen müsste, was mit CSS alleine ja schlecht geht.

Kennt jemand eine Umsetzung?

Gruß Tim

 

[QXARE]

Du könntest bspw. alle Items im vorhinein absolute positionieren.

 

[Timdaroxxa]

Aber dann sind doch alle ineinandergeschoben auf einem Haufen ;D?

 

[QXARE]

Mit top, right, bottom, left kannst du positionierte Elemente verschieben. Da alle eine fixe Breite haben, könntest du diese mit left: width; entsprechend verschieben.

 

[Timdaroxxa]

Ah sry, war falsch von mir beschrieben in der Problemstellung. Es handelt sich natürlich nicht um genau 4 .item, sondern um beliebig viele. Ich habe nur 4 benutzt um die ungefähre Struktur darzustellen.
Es handelt sich eher um eine Liste.

 

[QXARE]

.wrapper div:hover + div { margin: 0 0 0 width; }

 

[Timdaroxxa]

Hey,
danke.

Ich glaub ich hab jetzt sogar noch ne bessere Lösung gefunden:

<div class="wrapper">
    <div class="item_wrapper"><div class="item"></div></div>
<div class="item_wrapper"><div class="item"></div></div>
<div class="item_wrapper"><div class="item"></div></div>
<div class="item_wrapper"><div class="item"></div></div>
</div>

Einfach den item_wrapper auf position:relative; setzten und dann das item auf position: absolute; und man hat keine Probleme mehr.

 

[Daaron]

sicher, dass sowas geht? Als ich letztens was ähnliches probiert habe (nächstes Item vom gehoverten umfärben) hat sich nichts getan. Und selbst wenn: spätestens an der margin:width - Notation dürften sich 20% aller Browser verabschieden.

Was viel eher zielführend sein dürfte: Packe in jedes .item noch ein div.inside. Wenn du jetzt bei .item overflow an- und abschaltest und mit .item:hover .inside die Breite manipulierst solltest du an dein Ziel kommen.

 

[QXARE]

Sry, das width in meinem vorherigen Post sollte eigentlich als Variable gedacht sein. Hier sollte dann natürlich der fixe Wert stehen.

 

[Daaron]

hm, das kam mir gleich irgendwie spanisch vor. ich dachte, das könnte aber sogar klappen. schließlich kann man ja z.B. die Inhalte von "data-"-Attributen in Pseudo-Elementen als content:"..." verwenden, und man kann Breiten neuerdings dynamisch berechnen lassen (sowas wie "5%+10px-1em")

Die praktischere Lösung, vor allem eine die auch problemlos auf andere Auflösungen skaliert, ist ein Wrapper, wahlweise innen oder außen.

 

[QXARE]

Die praktischere Lösung, vor allem eine die auch problemlos auf andere Auflösungen skaliert, ist ein Wrapper, wahlweise innen oder außen.

Ja, keine Frage.