Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menunjukkan Div Kanak-Kanak Semasa Menyembunyikan Div Induknya dalam CSS?

Bagaimana untuk Menunjukkan Div Kanak-Kanak Semasa Menyembunyikan Div Induknya dalam CSS?

Linda Hamilton
Lepaskan: 2024-12-02 14:03:11
asal
809 orang telah melayarinya

How to Show a Child Div While Hiding Its Parent Div in CSS?

Cara Memaparkan Div Kanak-Kanak sambil Menyembunyikan Div Induknya

Menyembunyikan div induk sambil mengekalkan keterlihatan elemen anaknya boleh dicapai melalui manipulasi CSS. Begini caranya:

Langkah 1: Sembunyikan Div Induk

.Main-Div {
  display: none;
}
Salin selepas log masuk

Peraturan CSS ini menyembunyikan div induk dengan kelas "Div Utama."

Langkah 2: Jadikan Div Kanak-kanak Kelihatan

.Main-Div > .Inner-Div {
  visibility: visible;
}
Salin selepas log masuk

Peraturan ini menyasarkan div kanak-kanak (".Inner-Div") dalam div induk tersembunyi dan menjadikannya kelihatan.

Contoh Penuh

Menggabungkan peraturan ini, kod CSS dan HTML yang terhasil ialah:

.Main-Div {
  display: none;
}

.Main-Div > .Inner-Div {
  visibility: visible;
}
Salin selepas log masuk
<div class="Main-Div">
  This is some Text..
  This is some Text..
  <div class="Inner-Div">
    <a href="#">
      <img src="/image/pic.jpg" />
    </a>
  </div>
  This is some Text..
  This is some Text..
</div>
Salin selepas log masuk

Dengan menggunakan teknik ini, anda boleh secara selektif memaparkan elemen anak walaupun div induknya disembunyikan.

Atas ialah kandungan terperinci Bagaimana untuk Menunjukkan Div Kanak-Kanak Semasa Menyembunyikan Div Induknya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan