Titel umgeschrieben in: Z-Index verwenden, um Text beim Hover mit CSS anzuzeigen, was dazu führt, dass sich div verschiebt
P粉826283529
2023-09-03 20:17:48
<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>
从
.container div:hover中移除position: absolute对我来说解决了问题。这是你要找的吗？.container div:hover { overflow: visible; white-space: normal; z-index: 2; position: absolute; <---移除这个 max-width: 100px; }