Heim > Web-Frontend > CSS-Tutorial > Wie zeige ich ein untergeordnetes DIV an, während das übergeordnete DIV ausgeblendet wird?

Wie zeige ich ein untergeordnetes DIV an, während das übergeordnete DIV ausgeblendet wird?

Barbara Streisand
Freigeben: 2024-12-22 22:41:17
Original
338 Leute haben es durchsucht

How to Show a Child DIV While Hiding its Parent DIV?

Anzeigen versteckter untergeordneter DIVs innerhalb unsichtbarer übergeordneter DIVs

In diesem Artikel befassen wir uns mit der Herausforderung, ein untergeordnetes DIV anzuzeigen und gleichzeitig das übergeordnete DIV beizubehalten versteckt. Diese Funktionalität kann für Szenarien erforderlich sein, in denen Sie bestimmte Teile Ihres Inhalts bedingt ein- oder ausblenden möchten.

Frage:

Wie können wir ein untergeordnetes DIV beim Ausblenden aufdecken? sein übergeordnetes DIV?

Antwort:

Um dies zu erreichen, ändern Sie die Sichtbarkeit Einstellungen sowohl des übergeordneten als auch des untergeordneten DIVs mithilfe von CSS.

Für das übergeordnete DIV:

  • Setzen Sie die Sichtbarkeitseigenschaft auf „Ausgeblendet“ oder „Reduziert“.
  • Optional können Sie dies tun Setzen Sie außerdem die Eigenschaften „Breite“, „Höhe“, „Rand“ und „Auffüllung“ auf 0, um die Auswirkungen auf das Layout zu minimieren.

Für das Kind DIV:

  • Setzen Sie die Sichtbarkeitseigenschaft auf sichtbar.

Auf diese Weise wird das untergeordnete DIV sichtbar, während das übergeordnete DIV verborgen bleibt.

Implementierung:

Hier ist eine überarbeitete Version Ihres Codes, die die Vorschläge enthält Lösung:

.Main-Div {
  visibility: hidden;
}

.Main-Div > .Inner-Div {
  visibility: visible;
}
Nach dem Login kopieren
<div class="Main-Div">
  This is some Text...
  <div class="Inner-Div">
    <a href="#">
      <img src="/image/pic.jpg" />
    </a>
  </div>
  This is some Text...
</div>
Nach dem Login kopieren

Beispiel:

Eine Live-Demonstration finden Sie unter dem bereitgestellten JSFiddle-Link in der Originalantwort: http://jsfiddle .net/pread13/h955D/153/

Das obige ist der detaillierte Inhalt vonWie zeige ich ein untergeordnetes DIV an, während das übergeordnete DIV ausgeblendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage