Question

我有一些元素，我想在它们被徘徊时显示一些额外的信息。我已经尝试将我的内容从盒子的底部放出，然后在悬停时将其设置到底部，但是根据内容的数量，它有时仍然可见。

在下面的示例中，我有一个红色框，我希望黄色框从底部生成动画。现在我可以使用像bottom: -9999px这样的疯狂值，但这会导致我的动画速度问题滑动内容。

.item {
  position: relative;
  overflow: hidden;
  background: red;
}
.item:hover .item__box {
  bottom: 0;
}
.item__box {
  position: absolute;
  bottom: -100%;
  background: yellow;
  transition: all 300ms;
}

<div class="item">
  
  <br /><br /><br />
  <p>lorem ipusm</p>
  <br /><br /><br />
  
  <div class="item__box">
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
    <p>lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem </p>
  </div>
</div>

如何确保内容始终位于包装盒底部之外，然后悬停时可以很好地滑动？

编辑：对不起，为了说清楚，在悬停时我希望黄色内容来自红色框的底部，所以顶部有一个空隙，仍然可以看到红色。

Answer 1

如果指定百分比，则可以添加transform: translate()以相对于自己的大小移动元素，而不是仅使用相对于父级大小的顶部和底部。

这样，您可以将元素移动到bottom: 0，这是您想要的最终位置（框的底部与项目的底部对齐），然后将其100％向下翻译，这意味着盒子的顶部将是底部的位置。

动画不会发生在bottom属性上，而是发生在transform上，这意味着您基本上将框顶部从底线移动到您的最终位置得到底部= 0。

难以解释，易于查看：

＆＃13;

.item {
  position: relative;
  overflow: hidden;
  background: red;
}
.item__box {
  bottom: 0; /* Bottom of box aligned with bottom of item */
  /* Starting position: use transform shift the item down by its 
     own height, so it is just out of visible range. */
  transform: translate(0, 100%); 

  transition: all 300ms;
  position: absolute;
  background: yellow;
}
.item:hover .item__box {
  /* Animation: rather than animate top, animate the translation, so
     it moves up from just out of range to its normal position */
  transform: translate(0, 0);
}

＆＃13;

<div class="item">
  
  <br /><br /><br />
  <p>Lorem ipsum dolor sit amet</p>
  <br /><br /><br />
  
  <div class="item__box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <p>This is the end!</p>
  </div>
</div>

＆＃13;

就个人而言，我认为当黄色框小于红色项目时，效果会更好。在这种情况下，它会慢慢地动画并粘在底部（当然，所有内容都可见）。

Answer 2

如果您只想在悬停时显示其他内容，您是否考虑过使用手风琴？

这可以使用javascript，html和css的组合手动完成。或者您使用预制的库插件，如jQuery UI 这可以在https://jqueryui.com/accordion/

找到

将div置于父

2 个答案: