Bolehkah Div Kanak-Kanak Kelihatan Semasa Div Induknya Tersembunyi?

Memaparkan Div Kanak-kanak Di Dalam Div Induk Tersembunyi

Bolehkah div kanak-kanak dipaparkan semasa induknya kekal tersembunyi? Walaupun ia mungkin kelihatan berlawanan dengan intuisi, senario ini boleh dicapai.

Pertimbangkan kod HTML berikut:

<style>
  .Main-Div {
    display: none;
  }
</style>

<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>

Secara lalai, kelas 'Main-Div' disembunyikan menggunakan 'display: none; ' dalam CSS. Walau bagaimanapun, matlamatnya adalah untuk menunjukkan kelas 'Inner-Div' dalam induk tersembunyi ini.

Untuk mencapainya, anda perlu mengawal keterlihatan dan bukannya paparan. CSS boleh digunakan seperti berikut:

.parent>.child {
  visibility: visible;
}

.parent {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

Di sini, gaya 'keterlihatan' ditetapkan kepada 'kelihatan' untuk div anak, manakala 'keterlihatan' div induk ditetapkan kepada 'tersembunyi'. Selain itu, lebar dan tinggi div induk ditakrifkan sebagai sifar untuk meminimumkan kehadirannya. Dengan melakukan ini, div anak menjadi kelihatan dalam div induk tersembunyi.

Untuk contoh lengkap, rujuk JSFiddle berikut: http://jsfiddle.net/pread13/h955D/153/.

Atas ialah kandungan terperinci Bolehkah Div Kanak-Kanak Kelihatan Semasa Div Induknya Tersembunyi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!