Comment afficher un élément enfant lorsque son élément parent est masqué ?

Comment dévoiler un élément enfant au sein d'un élément parent masqué

Dans le domaine du développement Web, il est souvent souhaitable d'afficher des éléments spécifiques tout en garder les autres cachés, en particulier dans les structures imbriquées. Le défi se pose lorsque l'on tente d'afficher un élément enfant dans un élément parent caché.

Le Question :

如何在一个隐藏的父元素内显示一个子元素？实现这个功能是可能的嗎？

示例代码：

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

Le Solution :

Pour y parvenir, vous pouvez utiliser la technique suivante :

1. Masquer le parent : Réglez la visibilité de l'élément parent sur " caché » ou « effondrement ». Cela masquera efficacement l'intégralité de l'élément parent, y compris tous ses enfants.
2. Découvrez l'enfant : Ensuite, définissez la visibilité de l'élément enfant sur "visible". Cela remplacera l'état caché du parent et révélera l'élément enfant spécifique.

Feuille de style modifiée :

.parent>.child
{
    visibility: visible;
}

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

Exemple complet :

Vous pouvez retrouver une démonstration en direct de cette solution à l'URL suivante : http://jsfiddle.net/pread13/h955D/153/

Remarque supplémentaire :

Avec l'aide de @n1kkou, la solution a été affinée pour éviter problèmes d'espace ou de marge inutiles lors du masquage de l'élément parent.

En mettant en œuvre ces étapes, vous pouvez afficher efficacement les éléments enfants dans l'élément parent masqué. éléments, offrant une plus grande flexibilité pour la conception de vos pages Web.

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!