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>

我有两个父级和元素，应该显示在父级的悬停上。问题是我必须摆脱滚动而不改变父母的财产。

请注意，这只是一个简单的示例，因此我必须以对其他元素最小的影响来解决此问题。谢谢！

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不能为您提供帮助，因为您不能在transition上使用height，但是可以使用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。位置和溢出

2 个答案: