CSS。位置和溢出

Question

我已经为我的问题创建了一个简单的演示。

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: -20px;
  background: yellow;
}
.set-overflow:hover .element{
  bottom: 0;
}

<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

我有两个 parent 和元素，它们应该出现在 parent 的悬停上。问题是我必须在不更改 parents 属性的情况下摆脱滚动。

请注意，这只是一个简单的示例，因此我必须在尽可能减少对其他元素的影响的情况下解决这个问题。谢谢！

JSFiddle：https://jsfiddle.net/o0abLxek/15/

Answer 1

使您的子元素在非悬停状态下 height:0：

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: 0;
  height:0;
  overflow:hidden;
  background: yellow;
}
.set-overflow:hover .element{
  height:auto;
}

<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

Answer 2

编辑后的答案： 得知您想在元素上使用过渡（我猜您想让它向上滑动），我更新了我的答案。 height 不会帮助你，因为你不能在 height 上使用 transition，但你可以使用 max-height，正如 in this question (How can I transition height: 0; to height: auto; using CSS?) 所指出的那样。

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: 0;
  max-height:0;
  overflow:hidden;
  background: yellow;
  transition: max-height 1s;
}
.set-overflow:hover .element{
  max-height:100px;
}

<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

旧答案： 为什么不使用普通的旧 visibility 而不是在悬停时四处移动元素？像这样：https://jsfiddle.net/wpxehqkb/

CSS。位置和溢出

CSS. Position and overflow

css

css-position

overflow