通过单击仅使用 css 的 div 来隐藏非同级 div

Question

我试图在使用侧面导航栏（引导导航栏）时隐藏一个 div。 导航栏和 .display-area 元素位于 div 内。 .display-area div 有一个子 div，里面有 .animation-1 类。有没有一种方法可以在单击 .nav 类中的列表元素时仅使用 CSS 而无需脚本来切换 .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 遍历 up DOM，你需要 javascript。

没有脚本就无法完成您想做的事情。