为什么即使在溢出之后我的 html 元素也没有被隐藏：hidden 属性答案

【问题标题】：Why my html element is not being hidden even after overflow:hidden property为什么即使在溢出之后我的 html 元素也没有被隐藏：hidden 属性
【发布时间】：2021-09-05 22:41:30
【问题描述】：

我创建了一个动画标题区域。当我将鼠标悬停在我的徽标区域上时，我正在为我的第一个文本设置动画以移出视图，第二个文本进入视图。动画效果很好。

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

这是我的 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>

【问题讨论】：

你的.logo-container没有任何高度限制，它可以根据内容的需要增长，因此没有可以隐藏的“溢出” .
感谢您的帮助。

标签： html css dom css-animations

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您需要在.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>

【讨论】：