悬停时使用动画隐藏嵌套 div

Question

我一直在考虑对我正在设计的儿童网站的导航栏进行一些更改（不要介意目前是否 user-friendly/attractive），并考虑使用图标，当鼠标悬停时，在右侧显示一些文本（过渡到最大宽度属性）。为了使图标之间的滚动更加直观，我必须这样做，以便在悬停显示的文本时 (.hidden)，文本会重新隐藏起来（否则当用户试图指向下一个时图标，突然文本关闭，他们最终指向不同的图标）。

这几乎可以工作，但是当文本消失时，如果用户将光标靠近文本和图标之间的 division，事情就会开始变得不稳定。我猜这是因为文本试图同时为两种方式设置动画（即 .hidden 消失后，光标现在再次悬停在 .nav-link 上）。

此处，.hidden 是出现在图标右侧的文字。 .nav-link 是包含图像图标以及 .hidden div.

的父级 div

.hidden {
  max-width: 0px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  transition: all .3s ease-in-out;
  font-size: .9rem;
  font-family: 'Lato';
  padding: 0px;
}

.hidden:hover {
  max-width: 0px !important;
  transition: all .3s !important;
  padding: 0px !important;
}

.nav-link:hover>.hidden {
  padding-left: 2px;
  padding-right: 15px;
  max-width: 400px;
  transition: all .7s ease-in-out;
  transition-delay: .2s;
}

<ul>
  <a class="nav-link " href="/games">
    <li class="nav-item">
      <img alt="games icon" src='/img/global/icons/icon-games.jpg' width='40'>
      <span class='hidden align-middle'>Flash Games</span>
    </li>
  </a>   
  <a class="nav-link " href="/quizzes">
    <li class="nav-item">
      <img alt="images icon" src='/img/global/icons/icon-quizzes.jpg' width='40'>
      <span class='hidden align-middle'>Science Quizzes</span>
    </li>
  </a>     
</ul>

Answer 1

您的代码看起来很糟糕，但是为了简单的修复更改

.nav-link, .nav-item {
  min-width: 3rem;
}

至

.nav-link,.nav-item{
  margin-left:3px;
}
.nav-link:first-child,.nav-item:first-child{
   margin-left:0;
}

了解如何使用开发者工具。

Answer 2

就像有人指出的那样，您在语义结构和语法中遇到了许多问题，这些问题无法通过代码审查，但由于您正在修补。你可以改变宽度，或者玩动画。干杯

.special-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
.special-nav li a {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 1rem;
  border: silver 1px solid;
  transition: background-color .25s ease;
}
.special-nav li a span {
  white-space: nowrap;
  overflow: hidden;
  margin-left: .35rem;
  width: 0;
}
.special-nav li a img {
  width: 40;
}
.special-nav li a:hover {
  background-color: #ddd;
}
.special-nav li a:hover span {
  animation: grow 1s forwards;
}

@keyframes grow {
  to {
    width: 100%;
  }
}

<ul class="special-nav">
  <li>
    <a href="/games">
      <img alt="games icon" src="https://via.placeholder.com/30">
      <span>Flash Games</span>
    </a>
  </li>
  <li>
    <a href="/quizzes">
      <img alt="images icon" src="https://via.placeholder.com/30">
      <span>Science Quizzes</span>
    </a>
  </li> 
</ul>

悬停时使用动画隐藏嵌套 div

Hiding a nested div with an animation when hovered

html

css

css-transitions