Tajuk ditulis semula kepada: Gunakan z-index untuk memaparkan teks pada tuding dengan CSS, menyebabkan div bergerak
P粉826283529
2023-09-03 20:17:48
<p>Apabila saya menuding di atas div pertama untuk memaparkan teks penuh, kedudukan div kedua berubah supaya ia berada di belakang div pertama. Saya mahu div kedua kekal di tempatnya dan teks div pertama untuk menutupnya. </p>
<p><strong>Demo: </strong>https://codepen.io/adivity/pen/OJEzoPm</p>
<pre class="brush:php;toolbar:false;"><html>
<badan>
<div class="bekas">
<div>1) Ini adalah tajuk penuh yang ingin saya paparkan. Ia sangat panjang dan akan merangkumi sepenuhnya div seterusnya.
</div>
<div>2) Ini adalah tajuk penuh yang ingin saya paparkan. Ia sangat panjang dan akan merangkumi sepenuhnya div seterusnya.
</div>
<div>3) Ini adalah tajuk penuh yang ingin saya paparkan. Ia sangat panjang dan akan merangkumi sepenuhnya div seterusnya.
</div>
</div>
</badan>
</html></pre>
<pre class="brush:php;toolbar:false;">.container {
lebar maksimum: 100px;
margin: 0 auto;
}
.container div {
ketinggian: 80px;
warna latar belakang: kelabu;
}
.container div {
white-space: nowrap;
limpahan: tersembunyi;
limpahan teks: elipsis;
}
.container div:hover {
limpahan: nampak;
ruang putih: normal;
indeks z: 2;
lebar maksimum: 100px;
}</pre></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dari
.container div:hover中移除position: absoluteMenyelesaikan masalah untuk saya. Adakah ini yang anda cari?.container div:hover { overflow: visible; white-space: normal; z-index: 2; position: absolute; <---移除这个 max-width: 100px; }