简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Tajuk ditulis semula kepada: Gunakan z-index untuk memaparkan teks pada tuding dengan CSS, menyebabkan div bergerak
P粉826283529
P粉826283529 2023-09-03 20:17:48
0
1
381
<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>
P粉826283529
P粉826283529

membalas semua(1)
P粉759451255
P粉7594512552023-09-04 13:51:03 Tingkat 1

Dari .container div:hover 中移除 position: absolute Menyelesaikan masalah untuk saya. Adakah ini yang anda cari? 

.container div:hover {
  overflow: visible;
  white-space: normal;
  z-index: 2;
  position: absolute; <---移除这个
  max-width: 100px;
}
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！