Javascript 如何在另一个div中剪切超出div的内容？

我试图创建一个“泡泡”，它变得更大，以便用一个漂亮的动画来改变它的父颜色。我喜欢我的方法，但我只需要把它放在parent div中。 这就是我所拥有的：

HTML （和a.js仅用于测试）

你有一个演示，你可以按“应用程序”文本，它将缩放“气泡”一点点。我想删除以下内容：

有人能给我一个提示吗？不过，如果您知道此“功能”的更好解决方案，我将不胜感激。

---

提前谢谢你

将

overflow:hidden

属性添加到导航

div

将起作用。试试这个代码

.nav-menu {
    z-index: 1000;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    background-color: #B67171;
    color: white;
    position: fixed;
    width: 100%;
    transition: background-color .5s, top .2s;
    overflow: hidden;
}

---

添加到.navmenu属性溢出

---

只需添加

溢出：隐藏到您的
div
，使用class
nav菜单
。
下面是您编辑的示例：
使用
溢出：隐藏以第一个

@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

* {
  margin: 0;
  padding: 0;
}

.nav-menu {
    z-index: 1000;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    background-color: #B67171;
    color: white;
    position: fixed;
    width: 100%;
    transition: background-color .5s, top .2s;
}

.test {
    background-color: blue;
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    width: 32px;
    height: 32px;
    left: 50%;
    top: 50%;
    transform: scale(0) translate(-50%, -50%);
    transform-origin: top left;
    transition: transform .25s;
}

.nav-menu .brand h1 {
    margin: 0;
    padding: 0;
    line-height: 64px;
    font-family: 'Satisfy', cursive;
}

.nav-menu .menu-list {
    list-style: none;
    margin: 0;
}

.nav-menu .menu-list a {
    display: inline-block;
    margin: 0;
    padding: 0 16px;
    line-height: 64px;
    font-size: 21px;
    vertical-align: middle;
    transition: background-color .2s;
    color: white;
    text-decoration: none;
}

.nav-menu .menu-list a:hover {
    background-color: #D8C292;
}

let navMenu = document.getElementsByClassName("nav-menu")[0];
window.addEventListener('load', function (e) { navMenu.style.top = "0"; });

var showing = false;
function test () {
    document.getElementsByClassName("test")[0].style = "transform: scale(" + (showing ? 0 : 4) + ") translate(-50%, -50%);";
    showing = !showing;
}

.nav-menu {
    z-index: 1000;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    background-color: #B67171;
    color: white;
    position: fixed;
    width: 100%;
    transition: background-color .5s, top .2s;
    overflow: hidden;
}

nav-menu {
   ...
   overflow: hidden;
}