Wie kann ich ein untergeordnetes Div anzeigen, während das übergeordnete Div ausgeblendet bleibt?

Ein untergeordnetes Div innerhalb eines versteckten übergeordneten Div anzeigen

In bestimmten Programmierszenarien kann es vorkommen, dass ein untergeordnetes Div vorhanden sein muss sichtbar angezeigt, während das übergeordnete Div verborgen bleibt. Dies kann mithilfe spezifischer CSS-Eigenschaften erreicht werden.

Code-Aufschlüsselung:

Der bereitgestellte HTML-Code enthält ein Parent-Div mit der Klasse „Main-Div“ und ein Child Ein darin verschachteltes Div heißt „Inner-Div“. Zunächst wird das „Main-Div“ mithilfe der CSS-Eigenschaft „display:none“ ausgeblendet.

Um das „Inner-Div“ sichtbar zu machen, während das „Main-Div“ ausgeblendet bleibt, sind die folgenden CSS-Eigenschaften erforderlich angewendet:

1. Sichtbarkeit: sichtbar für das Child-Div: Dadurch wird sichergestellt, dass das „Inner-Div“ sichtbar wird, unabhängig von seiner Sichtbarkeit des übergeordneten Elements.
2. Sichtbarkeit: für das übergeordnete Div ausgeblendet: Dadurch wird das „Haupt-Div“ ausgeblendet, während das untergeordnete Element weiterhin angezeigt werden kann.
3. Breite: 0, Höhe: 0, Rand: 0 und Polsterung: 0 für das übergeordnete Div: Diese zusätzlichen CSS-Eigenschaften reduzieren das „Main-Div“ auf die Größe Null setzen, wodurch es praktisch unsichtbar wird, ohne den Platz zu beeinträchtigen, den es auf der Seite einnimmt.

Beispiel:

.parent>.child {
    visibility: visible;
}

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

Von Durch die Implementierung dieser CSS-Eigenschaften ist es möglich, ein sichtbares untergeordnetes Div innerhalb eines ausgeblendeten übergeordneten Div zu haben, wie im bereitgestellten JSFiddle-Beispiel gezeigt.

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