상위 요소가 숨겨져 있을 때 하위 요소를 표시하는 방법은 무엇입니까?

숨겨진 상위 요소 내에서 하위 요소를 공개하는 방법

웹 개발 영역에서는 특정 요소를 표시하는 동시에 특정 요소를 표시하는 것이 바람직한 경우가 많습니다. 특히 중첩된 구조 내에서 다른 항목을 숨긴 상태로 유지합니다. 숨겨진 상위 요소 내에 하위 요소를 표시하려고 할 때 문제가 발생합니다.

질문:

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

示例代码:

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

The 해결 방법:

이를 달성하려면 다음 기술을 사용할 수 있습니다.

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의 도움으로 솔루션이 더욱 개선되었습니다. 상위 요소를 숨기면서 불필요한 공간이나 여백 문제가 발생합니다.

이러한 단계를 구현하면 하위 요소를 효과적으로 표시할 수 있습니다. 숨겨진 상위 요소 내에서 웹페이지 디자인에 더 큰 유연성을 제공합니다.

위 내용은 상위 요소가 숨겨져 있을 때 하위 요소를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!