Une division enfant peut-elle être visible pendant que sa division parent est masquée ?

Affichage d'une div enfant à l'intérieur d'une div parent cachée

Une div enfant peut-elle être affichée pendant que son parent reste caché ? Bien que cela puisse paraître contre-intuitif, ce scénario est réalisable.

Considérez le code HTML suivant :

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

Par défaut, la classe 'Main-Div' est masquée à l'aide de 'display: none; ' en CSS. Cependant, le but est d'afficher la classe 'Inner-Div' au sein de ce parent caché.

Pour y parvenir, il est nécessaire de contrôler la visibilité plutôt que l'affichage. CSS peut être utilisé comme suit :

.parent>.child {
  visibility: visible;
}

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

Ici, le style « visibilité » est défini sur « visible » pour le div enfant, tandis que la « visibilité » du div parent est définie sur « masqué ». De plus, la largeur et la hauteur du div parent sont définies comme nulles pour minimiser sa présence. En faisant cela, le div enfant devient visible dans le div parent caché.

Pour un exemple complet, reportez-vous au JSFiddle suivant : http://jsfiddle.net/pread13/h955D/153/.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!