悬停显示较低的 div

Question

我想显示一个带有背景颜色的 div，并在其中显示一个带有标题的 <p>。将鼠标悬停在它上面应该会出现一个<p>（文本）并且第一个消失（标题）。我在玩 z-index 属性，但我无法实现它：

这是我的代码：

.magigDiv {
  width: 50%;
  float: left;
  background-color: forestgreen;
  padding: 10px;
  border-radius: 25px;
  height: 150px;
  border: 1px double black;
  opacity: 0.5;
  position: relative;
}

.text1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="magigDiv">
  <p class="text1" style="width: 100%;z-index:100;height:150px;position:absolute;">
    LOREM IPSUM
  </p>
  <p style="z-index: -1;width: 100%; height:150px;position:absolute;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </p>
</div>

Answer 1

您可以通过将opacity 0 设置为 1 来尝试一些简单的操作。请查看下面的 sn-p 以供参考。

.magigDiv {
  width: 50%;
  float: left;
  background-color: forestgreen;
  padding: 10px;
  border-radius: 25px;
  min-height: 150px;
  border: 1px double black;
  opacity: 0.5;
  position: relative;  
}

.title {
  text-align: center;
  opacity: 1;
  transition: all 0.3s ease;
}

.text {
  opacity: 0;
  transition: all 0.3s ease;
}

.title:hover+.text {
  opacity: 1;
}
.title:hover{
  opacity:0;
}

<div class="magigDiv">
  <p class="title">
    LOREM IPSUM
  </p>
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

Answer 2

我认为你需要：

1) 为<div>分配一个固定高度

2) 将position: relative 用于<div> 和position: absolute 用于<p>

3) 你需要先使用 JQuery 向上滑动<p> 以便显示第二个

Answer 3

先添加这个css：

div p:last-child:hover { top:-50px; position:relative; background-color:green;}

并更改您应用的内联样式中的一些属性，如下所示：

<div style="width: 40%; float:left; background-color: green;padding: 10px; position:relative;">

    <p style="z-index: 2;width: 100%;height:100%;z-index:100; text-align: center; vertical-align: middle;">
        LA EMPRESA
    </p>
    <p style="z-index: 3;width: 100%;height:100%;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
</div>