时间戳

首页 > 解决方案 > 如何在另一个 div 中剪切超出的 div 内容？

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

问题描述

我正在尝试创建一个更大的“气泡”，以便通过漂亮的动画更改其父颜色。我喜欢我的方法，但我只需要将它放在父 div 中。这就是我所拥有的：

HTML

<html>
<body>
  <div class="nav-menu" style="top: -64px;">
    <div class="test"></div>
    <div class="brand" onclick="test();">
      <h1>App</h1>
    </div>
    <ul class="menu-list">
      <li class="menu-item"><a href="#">Item</a></li>
    </ul>
  </div>
</body>
</html>

CSS

@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;
}

（和一个 .js 仅用于测试）

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;
}

在这里，您有一个演示，您可以在其中按下“应用程序”文本，它会稍微缩放“气泡”。我想删除以下内容： 在此处输入图像描述

任何人都可以给我一个提示吗？但是，如果您知道此“功能”的任何更好的解决方案，我将不胜感激。先感谢您！

标签： javascripthtmlcss

解决方案

将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;
}

推荐阅读