當父元素被隱藏時如何顯示子元素？

如何在隱藏的父元素中顯示子元素

在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;
}

完整範例：

您可以在以下網址找到此解決方案的現場演示： http://jsfiddle.net/pread13/h955D/153/

附加說明：

在@n1kkou的幫助下，解決方案得到了進一步完善，以防止隱藏父元素時出現不必要的空間或邊距問題。

透過實作這些步驟，您可以有效地在其中顯示子元素隱藏父元素，為您的網頁設計提供更大的靈活性。

以上是當父元素被隱藏時如何顯示子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！