只显示元素时，它是在另一个元素

我一直在试图创建一个框和两个元素，将滑入点击后，切换另一个，但我希望他们只能在框中可见。只显示元素时，它是在另一个元素

这是我糟糕的，愚蠢的，stinkin的代码，请协助。

HTML

<input id="toggle" type="checkbox"> 
<label for="toggle"> 
    <button>switch</button> 
</label> 
<div id="box" style="background:rgba(0, 0, 0, 0.4); box-shadow:inset 0px 0px 10px 0px #000; 
    text-shadow: 2px 2px 2px #000; padding: 5px 5px 5px 5px; letter-spacing: 0px; font-size: 18px;"> 
    <div id="slider"> 
    <table> 
     <tr> 
     <td id="t2"><a id="s2" href="https://soundcloud.com/" target="_blank" rel="noopener nofollow">Soundcloud</a></td> 
     <td id="t2"><a id="s2" href="https://mixcloud.com/" target="_blank" rel="noopener nofollow">Mixcloud</a></td> 
     <td id="t2"><a id="s2" href="bandcamp.com" target="_blank" rel="noopener nofollow">Bandcamp</a></td> 
     <td id="t2"><a id="s2" href="https://hearthis.at" target="_blank" rel="noopener nofollow">Hearthis.at</a></td> 
     <td id="t2"><a id="s2" href="https://archive.org" target="_blank" rel="noopener nofollow">Archive</a></td> 
     </tr> 
    </table> 
    </div> 
    <div id="slider2"> 
    <table> 
     <tr> 
     <td id="t2">1111111111111</td> 
     <td id="t2">222222</td> 
     <td id="t2">333333</td> 
     <td id="t2">4444444444</td> 
     <td id="t2">5555555</td> 
     </tr> 
    </table> 
    </div> 
</div>

CSS。

#box { 
    height: 50px; 
    width: 100%; 
    border: 1px solixyzd #ccc; 
} 
#slider { 
    -webkit-transition: all .5s cubic-bezier(0.42,0,0.58,1); 
    transition: all .5s cubic-bezier(0.42,0,0.58,1); 
} 
#toggle { 
    position: absolute; 
    visibility: hidden; 
} 
#toggle + label { 
    cursor: pointer; 
} 
#slider2 { 
    margin-top: -100px; 
    overflow-y: hidden; 
    -webkit-transition: all .5s cubic-bezier(0.42,0,0.58,1); 
    transition: all .5s cubic-bezier(0.42,0,0.58,1); 
} 
#toggle:checked ~ #box > #slider { 
    margin-top: -80px; 
} 
#toggle:checked ~ #box > #slider2 { 
    margin-top: 50px; 
}

https://codepen.io/pen/xdeevd

来源

2017-05-27 user498283

添加溢出：隐藏在框应该工作。

#box { 
    overflow: hidden; 
    height: 50px; 
    width: 100%; 
    border: 1px solid #ccc; 
}

来源

2017-05-27 07:09:15

使用父和子类，儿童默认是隐藏的。就像这个例子。

的CSS：

.child{display:none} 
.parent .child{ display:block }

HTML：

<div class="parent"> 
    <div class="child"> Visible Division </div> 
</div> 
<div class="child">Hidden Division</div>

来源

2017-05-27 06:55:38

你隐藏你的方式，它不工作。

因此改变以下CSS将工作

#toggle { 
position: absolute; 
opacity: 0; 
} 
#toggle:checked ~ #box > #slider2{ 
    margin-top: 10px; 
    display: block; 
} 
#toggle:checked ~ #box > #slider{ 
    display: none; 
}

休息，你可以使用自己的想法更多的动画和是点击左上角使复选框工作，或者你可以谷歌同时隐藏复选框让它起作用。

谢谢， Debashis

来源

2017-05-27 07:36:49 RiDev

只显示元素时，它是在另一个元素

回答

相关问题