상위 DIV를 숨기면서 하위 DIV를 표시하는 방법은 무엇입니까?

보이지 않는 상위 DIV 내에 숨겨진 하위 DIV 표시

이 기사에서는 상위 DIV를 유지하면서 하위 DIV를 표시하는 문제를 해결합니다. 숨겨진. 이 기능은 콘텐츠의 특정 부분을 조건부로 표시하거나 숨기려는 시나리오에 필요할 수 있습니다.

질문:

숨겨진 동안 하위 DIV를 어떻게 표시할 수 있습니까? 그 부모 DIV?

답변:

이를 달성하려면 CSS를 사용하여 상위 및 하위 DIV의 가시성 설정을 수정하십시오.

상위 DIV의 경우 :

• 가시성 속성을 숨김 또는 축소합니다.
• 선택적으로 너비, 높이, 여백 및 패딩 속성을 0으로 설정하여 레이아웃에 미치는 영향을 최소화할 수도 있습니다.

하위 DIV의 경우:

• 가시성 속성을 visible로 설정합니다.

이렇게 하면 하위 DIV 상위 DIV가 숨겨진 상태로 유지되는 동안 표시됩니다.

구현:

다음은 제안된 코드를 통합한 수정된 버전의 코드입니다. 솔루션:

.Main-Div {
  visibility: hidden;
}

.Main-Div > .Inner-Div {
  visibility: visible;
}

<div class="Main-Div">
  This is some Text...
  <div class="Inner-Div">
    <a href="#">
      <img src="/image/pic.jpg" />
    </a>
  </div>
  This is some Text...
</div>

예:

실시간 데모를 보려면 원래 답변에 제공된 JSFiddle 링크를 참조하세요: http://jsfiddle .net/pread13/h955D/153/

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