html - 仅在元素位于另一个元素内时显示该元素

Question

我一直在尝试创建一个框和两个元素，它们会在单击时滑入，将一个元素切换为另一个元素，但我希望它们只在框内可见。

这是我糟糕、愚蠢、恶臭的代码，请帮忙。

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

Answer 1

将 overflow:hidden 添加到框中应该可行。

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