Question

我在使用侧导航栏（bootstrap navbar）时试图隐藏div。导航栏和.display-area元素位于div内。 .display-area div有一个子div，里面有类.animation-1。有没有办法可以在仅使用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遍历 up DOM，你需要javascript。

如果没有脚本，就无法完成您的工作。

通过仅使用css单击div来隐藏非兄弟div

1 个答案: