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

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

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

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!