html - CSS:过渡不适用于悬停

Question

我有一个包含图像和用户名的框。最初宽度是固定的以节省空间，在 hover 上，我希望展开该部分以显示全部内容。我已经做到了这一点，但我无法添加 transition 来使动画流畅。

为什么它不起作用？

.peer-person {
  position: relative;
  z-index: 1000;
  width: 9.5%;
  min-width: 66px;
  margin: 0px 0px 5px 0px;
  padding: 6px 0px 5px 0px;
  display: inline-block;
  border: 2px solid #efefef;
  border-radius: 5px;
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;
}

.hover-container:hover>.peer-person {
  z-index: 1001;
  background-color: white;
  width: auto;
}

.hover-container {
  display: inline-block;
  width: 9.5%;
  min-width: 66px;
}

.peer p {
  margin: 0px;
  padding: 3px;
  padding-bottom: 0px;
  color: grey;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<span class="hover-container">
<span class="peer-person">
<a href="#" role="button" class="peer" aria-expanded="false">
<img src="http://via.placeholder.com/36x36" class="img-circle">
<p>1.LONGUSERNAMELONGLONG</p>
</a>
</span>
</span>
<span class="hover-container">
<span class="peer-person">
<a href="#" role="button" class="peer" aria-expanded="false">
<img src="http://via.placeholder.com/36x36" class="img-circle">
<p>2.LONGUSERNAMELONGLONG</p>
</a>
</span>
</span>
<span class="hover-container">
<span class="peer-person">
<a href="#" role="button" class="peer" aria-expanded="false">
<img src="http://via.placeholder.com/36x36" class="img-circle">
<p>3.LONGUSERNAMELONGLONG</p>
</a>
</span>
</span>

Answer 1

问题是您将宽度从特定值 (9.5%) 更改为具有非特定值的宽度 (auto)。为了使过渡正常工作，您需要在悬停状态上使用特定值

所以从 width:auto 更改为 width:100% 。好的，现在它可以工作了，但它并不完全像你想要的那样工作。将 hover-container 的宽度更改为 auto 。所以它将继承它的 child 的宽度。通过设置 width:9.5% 给它的子元素，它会和 width 一样。然后，当 children 展开时，它也会展开。

请看下面的片段

编辑:如果你有多个并排的，在 hover-container 上使用 max-width:9.5% 并在悬停时添加样式容器也是 ( max-width:100% ) 。它会扩展(带有过渡)，但只会扩展到文本的宽度。

.peer-person {
  position: relative;
  z-index: 1000;
  width: 9.5%;
  min-width: 66px;
  margin: 0px 0px 5px 0px;
  padding: 6px 0px 5px 0px;
  display: inline-block;
  border: 2px solid #efefef;
  border-radius: 5px;
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;
}

.hover-container:hover>.peer-person {
  z-index: 1001;
  background-color: white;
  width: 100%;
}

.hover-container {
  display: inline-block;
  max-width: 9.5%;
  min-width: 66px;
 -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s ease-in-out 0s;
  transition: all 1s ease-in-out 0s;
}
.hover-container:hover {
  max-width:100%;
 
  
}

.peer p {
  margin: 0px;
  padding: 3px;
  padding-bottom: 0px;
  color: grey;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<span class="hover-container">
<span class="peer-person">
<a href="#" role="button" class="peer" aria-expanded="false">
<img src="http://via.placeholder.com/36x36" class="img-circle">
<p>1.LONGUSERNAMELONGLONG</p>
</a>
</span>
</span>
<span class="hover-container">
<span class="peer-person">
<a href="#" role="button" class="peer" aria-expanded="false">
<img src="http://via.placeholder.com/36x36" class="img-circle">
<p>2.LONGUSERNAMELONGLONG</p>
</a>
</span>
</span>
<span class="hover-container">
<span class="peer-person">
<a href="#" role="button" class="peer" aria-expanded="false">
<img src="http://via.placeholder.com/36x36" class="img-circle">
<p>3.LONGUSERNAMELONGLONG</p>
</a>
</span>
</span>