简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Titel umgeschrieben in: Z-Index verwenden, um Text beim Hover mit CSS anzuzeigen, was dazu führt, dass sich div verschiebt
P粉826283529
P粉826283529 2023-09-03 20:17:48
0
1
383
<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>
P粉826283529
P粉826283529

Antworte allen(1)
P粉759451255
P粉7594512552023-09-04 13:51:03 1 Etage

从 .container div:hover 中移除 position: absolute 对我来说解决了问题。这是你要找的吗？

.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute; <---移除这个
  max-width: 100px;
}
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！