Titel umgeschrieben in: Z-Index verwenden, um Text beim Hover mit CSS anzuzeigen, was dazu führt, dass sich div verschiebt
<p>Wenn ich den Mauszeiger über das erste Div bewege, um den vollständigen Text anzuzeigen, ändert sich die Position des zweiten Divs, sodass es sich hinter dem ersten Div befindet. Ich möchte, dass das zweite Div an Ort und Stelle bleibt und der Text des ersten Div es abdeckt. </p>
<p><strong>Demo: </strong>https://codepen.io/adivity/pen/OJEzoPm</p>
<pre class="brush:php;toolbar:false;"><html>
<Körper>
<div class="container">
<div>1) Dies ist der vollständige Titel, den ich anzeigen möchte. Es ist sehr lang und deckt den nächsten Abschnitt vollständig ab.
</div>
<div>2) Dies ist der vollständige Titel, den ich anzeigen möchte. Es ist sehr lang und deckt den nächsten Abschnitt vollständig ab.
</div>
<div>3) Dies ist der vollständige Titel, den ich anzeigen möchte. Es ist sehr lang und deckt den nächsten Abschnitt vollständig ab.
</div>
</div>
</body>
</html></pre>
<pre class="brush:php;toolbar:false;">.container {
maximale Breite: 100 Pixel;
Rand: 0 automatisch;
}
.container div {
Höhe: 80px;
Hintergrundfarbe: grau;
}
.container div {
Leerraum: nowrap;
Überlauf versteckt;
Textüberlauf: Auslassungspunkte;
}
.container div:hover {
Überlauf: sichtbar;
Leerraum: normal;
Z-Index: 2;
maximale Breite: 100 Pixel;
}</pre></p>
