Kann ein untergeordnetes Div sichtbar sein, während sein übergeordnetes Div ausgeblendet ist?

Untergeordnetes Div innerhalb eines ausgeblendeten übergeordneten Div anzeigen

Kann ein untergeordnetes Div angezeigt werden, während sein übergeordnetes Div verborgen bleibt? Obwohl es kontraintuitiv erscheinen mag, ist dieses Szenario realisierbar.

Bedenken Sie den folgenden HTML-Code:

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

Standardmäßig wird die Klasse „Main-Div“ mit „display: none;“ ausgeblendet. ' in CSS. Das Ziel besteht jedoch darin, die „Inner-Div“-Klasse innerhalb dieses verborgenen übergeordneten Elements anzuzeigen.

Um dies zu erreichen, ist es notwendig, die Sichtbarkeit und nicht die Anzeige zu steuern. CSS kann wie folgt verwendet werden:

.parent>.child {
  visibility: visible;
}

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

Hier ist der „Sichtbarkeit“-Stil für das untergeordnete Div auf „sichtbar“ gesetzt, während die „Sichtbarkeit“ des übergeordneten Div auf „versteckt“ gesetzt ist. Darüber hinaus werden die Breite und Höhe des übergeordneten Divs als Null definiert, um dessen Präsenz zu minimieren. Dadurch wird das untergeordnete Div innerhalb des ausgeblendeten übergeordneten Div sichtbar.

Ein vollständiges Beispiel finden Sie im folgenden JSFiddle: http://jsfiddle.net/pread13/h955D/153/.

Das obige ist der detaillierte Inhalt vonKann ein untergeordnetes Div sichtbar sein, während sein übergeordnetes Div ausgeblendet ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!