親要素が非表示のときに子要素を表示するにはどうすればよいですか?

隠蔽された親要素内の子要素を表示する方法

Web 開発の領域では、特定の要素を表示しながら特定の要素を表示することが望ましいことがよくあります。特に入れ子構造内では、他のものを隠しておきます。この課題は、非表示の親要素内に子要素を表示しようとすると発生します。

質問:

どのように一隐藏の父元素内で一子元素を表示しますか?实现这

の例:

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

解決策:

これを実現するには、次の手法を使用できます:

1. 親を隠す: 親要素の可視性を " に設定します。隠蔽」または「崩壊」。これにより、すべての子を含む親要素全体が事実上非表示になります。
2. 子を明らかにする: 次に、子要素の可視性を「表示」に設定します。これにより、親の非表示状態がオーバーライドされ、特定の子要素が表示されます。

変更されたスタイルシート:

.parent>.child
{
    visibility: visible;
}

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

完全な例:

このソリューションのライブ デモンストレーションは次の URL でご覧いただけます。 http://jsfiddle.net/pread13/h955D/153/

追加メモ:

@n1kkou の支援により、ソリューションはさらに改良され、親要素を非表示にする際に不要なスペースやマージンの問題が発生することはありません。

これらの手順を実装することで、子要素を効果的に表示できます。非表示の親要素内にあるため、Web ページのデザインの柔軟性が高まります。

以上が親要素が非表示のときに子要素を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。