CSS 만 사용하여 div를 클릭하여 형제가 아닌 div를 숨기기

Question

사이드 탐색 모음 (부트 스트랩 navbar)을 사용할 때 div를 숨기려고합니다. 탐색 표시 줄과 .display-area 요소는 div 안에 있습니다. .display-area div에는 클래스 .animation-1이있는 하위 div가 있습니다. CSS와 스크립트가없는 .nav 클래스의 list 요소를 클릭하면 .animation-1 div의 가시성을 토글 할 수있는 방법이 있습니까? 이미 형제 선택자를 사용하여 시도했지만 작동하지 않았습니다. 코드는 다음과 같다 : 다음과 같이

<div class="navbar navbar-default navbar-left"> 
     <ul class="nav navbar-nav"> 
      <li><i class="fa fa-circle-o"></i></li> 
     </ul> 
    </div> 
<div class="display-area"> 
      <div class="animation-1"> 
       <span class="round-tab round-tab-truck"> 
        <i class="fa fa-truck"></i> 
       </span> 
      </div></div> 

CSS는 다음과 같습니다

.navbar-left { width: 100px; 
    border-radius: 0; 
    border:0px; 
    height: 100%; 
    margin:0px; 
    background-color: #092F58; } 
.navbar-nav li { width:100px; 
    align-content: center; } 
.navbar-nav i{ padding:20px; 
    display: block; 
    color: white; 
    font-size: 30px; 
    width:100px; 
    text-align: center; } 
.navbar i:hover { color: #5BEBAA; } 
.active { color: #5BEBAA; } 
.display-area { background: #F5F4F2; 
    margin:0px; 
    height:630px; 
    padding:0px; } 
.animation-1 { 
    margin: 0px auto; 
    background: #F5F4F2; 
    width:100%; 
    height:630px; 
    visibility:hidden; 
} 
.round-tab { 
    width: 100px; height: 100px; line-height: 100px; 
    border-radius: 100px; border: 2px solid #e0e0e0; 
    background: #fff; 
    z-index: 2; 
    position:absolute; top:410px; 
    text-align: center; font-size: 30px; 
    margin:0px; display:inline-block; 
} 
.round-tab i{ color:#555555; } 
.round-tab-truck{ left:50%; 
    animation: colorchange 2s; 
    animation-delay:3s; 
    -webkit-animation: colorchange 2s; 
    -webkit-animation-delay:3s; 
    -moz-animation: colorchange 2s; 
    -moz-animation-delay:3s; 
    animation-fill-mode: forwards; 
} 

Answer 1

CSS는 당신이 CSS와 DOM까지를 통과 할 수 계단식, 당신은 자바 스크립트가 필요합니다.

스크립팅하지 않고 수행하려는 작업을 수행 할 수 없습니다.