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％）更改为具有非特定值（自动）的宽度。要使转换工作，您需要在悬停状态

上使用特定值

因此从width:auto更改为width:100%。好的，现在它可以工作，但它并不像你想的那样完全正常工作。将hover-container的宽度更改为auto。所以它会从它的孩子那里继承宽度。通过将width:9.5%设置为它的子项，它将具有相同的功能。然后，当孩子们扩张时，它也会扩大。

请参阅下面的代码段

编辑：如果您有多个并排，请在max-width:9.5%上使用hover-container并在悬停时，也可以向容器添加样式（最大宽度：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>

Answer 2

您无法使用auto高度/宽度进行过渡。获得结果的最简单方法之一是使用精确值设置max-width/max-height，以使用transition为其设置动画。请查看此link以获取更多详细信息和其他选项以获得输出。

CSS：转换不在悬停上工作

2 个答案: