为什么我的 html 元素即使在 overflow:hidden 属性 之后也没有被隐藏

Question

我创建了一个动画标题区。当我将鼠标悬停在我的徽标区域上时，我正在为我的第一个文本设置动画以移出视图，而第二个文本则进入视图。动画运行完美。

但是，当它不处于悬停模式时，下面的第二个文本不会被隐藏。我已经将徽标容器设置为溢出：隐藏，但它仍然没有隐藏。

这是我的HTML：-

nav{
  background: #05251F;
  min-height: 70px;
  height: 10vh;
  width: 100vw;
  color: whitesmoke;

}

.nav-container{
  overflow: hidden;
}

.logo-container{
  overflow: hidden;
}

.nav-container .logo-container h2{
  transition: all 0.1s ease-out;
}

.nav-container .logo-container:hover .first{
  transform: translateY(-120%);
}

.nav-container .logo-container:hover .second{
  transform: translateY(-120%);
}

h1{
  font-family: headingFontRegular;
}

nav .nav-container{
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
}

nav .nav-container h2{
  margin:10px;
}

nav .nav-container ul{
  list-style: none;
  display: flex;
  height: 100%;
}

<nav>
  <div class="nav-container">
      <div class="logo-container">
          <h2 class="first">Ajay Birbal.</h2>
          <h2 class="second">Ajay Birbal.</h2>
      </div>
      <ul>
          <li>Home</li>
          <li>Blog</li>
          <li>Contact</li>
      </ul>
  </div>
</nav>

Answer 1

您需要在.logo-container

中添加height

nav{
  background: #05251F;
  min-height: 70px;
  height: 10vh;
  width: 100vw;
  color: whitesmoke;

}

.nav-container{
  overflow: hidden;
}

.logo-container{
  overflow: hidden;
  height: 70px; // Added
}

.nav-container .logo-container h2{
  transition: all 0.1s ease-out;
  line-height: 2; // Added
}

.nav-container .logo-container:hover .first{
  transform: translateY(-120%);
}

.nav-container .logo-container:hover .second{
  transform: translateY(-120%);
}

h1{
  font-family: headingFontRegular;
}

nav .nav-container{
  display: flex;
  justify-content: space-between;
  padding: 0px 30px;
}

nav .nav-container h2{
  margin:10px;
}

nav .nav-container ul{
  list-style: none;
  display: flex;
  height: 100%;
}

<nav>
  <div class="nav-container">
      <div class="logo-container">
          <h2 class="first">Ajay Birbal.</h2>
          <h2 class="second">Ajay Birbal.</h2>
      </div>
      <ul>
          <li>Home</li>
          <li>Blog</li>
          <li>Contact</li>
      </ul>
  </div>
</nav>

Answer 2

nav{
  background: #05251F;
  min-height: 70px;
  height: 10vh;
  width: 100vw;
  color: whitesmoke;
  overflow: hidden;
}

您需要在 .nav 元素中设置溢出