Verstecken Sie ein Nicht-Geschwister-div, indem Sie nur mit css auf ein div klicken

Question

Ich versuche, ein div zu verbergen, wenn Sie die seitliche Navigationsleiste (bootstrap navbar) verwenden. Die Navigationsleiste und die .display-area-Elemente befinden sich in einem div. Das .display-area-div hat ein Kind-div mit der Klasse .animation-1 darin. Gibt es eine Möglichkeit, die Sichtbarkeit von .animation-1 div beim Klicken auf das Listenelement in der .nav-Klasse mit nur CSS und ohne Skript umzuschalten. Ich habe bereits versucht, die Geschwister Selektoren zu verwenden, aber nicht funktioniert. Der Code wie folgt lautet:

<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 ist wie folgt:

.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 ist Kaskadierung Sie bis das DOM mit CSS nicht durchqueren können, müssen Sie Javascript dafür.

Was Sie tun möchten, kann nicht ohne Skripting erfolgen.