悬停以覆盖下一个元素

Question

我有一个段落。当盘旋时，它应该超过它下面的文本

问题是H1文本移动了它的位置。

只应隐藏“HOVER OF PARAGRAPH”字样。

* {
    margin: 0;
    box-sizing: border-box;
}

.wrapper {
    display: block;
    margin: 50px;
    width: 200px;
    position: relative; /* So position absolute stays in this box */
}

.mouseover-me {
    display: block; /* <a> tag has no defaults */
    height: 55px;
    max-height: 55px;
    overflow-y: hidden;
    z-index: 20;
}

.mouseover-me:hover{
    background-color: lightgrey;
    z-index: 20;
    position: absolute;
    max-height: none;
    height: auto;
}

<div class="wrapper">
    <a class="mouseover-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Nunc vehicula dapibus sem eget maximus. Nunc vehicula dapibus sem eget maximus.</a>
    <h1 class="override-me">HOVER ABOVE PARAGRAPH TO HIDE THIS TEXT PARTIALLY, BUT KEEP THIS H1 TEXT IN THE SAME POSITION</h1>
</div>

Answer 1

您需要进行两（2）次更改：

• position: absolute需要始终.mouseover-me设置，而不仅仅是悬停
• 您需要预留空间以避免初始重叠（.override-me { padding-top: 55px; }实现此目的）

* {
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  display: block;
  margin: 50px;
  width: 200px;
  position: relative; /* So position absolute stays in this box */
}
.mouseover-me {
  display: block; /* <a> tag has no defaults */
  height: 55px;
  position: absolute;
  max-height: 55px;
  overflow-y: hidden;
  z-index: 20;
}
.mouseover-me:hover{
  background-color: lightgrey;
  z-index: 20;
  max-height: none;
  height: auto;
}
.override-me { padding-top: 55px; }

<div class="wrapper">
  <a class="mouseover-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Nunc vehicula dapibus sem eget maximus. Nunc vehicula dapibus sem eget maximus.</a>
  <h1 class="override-me">HOVER ABOVE PARAGRAPH TO HIDE THIS TEXT PARTIALLY, BUT KEEP THIS H1 TEXT IN THE SAME POSITION</h1>
</div>