如何在悬停时制作HTML框，并使用JS或CSS显示其下方的文本

Question

我一直试图在悬停时制作一个HTML框幻灯片，并使用CSS或JS显示它下面的文本。我是JavaScript的新手，所以如果你通过JS实现答案，那么如果你提供一些解释就会很棒。

我搜索了很多网站，并询问了很多人，但我还没有实现它。

我制作了两个DIV，一个在另一个下面

我尝试编写一些示例文本，但它出现在框之前

.trigger{
width: 100px;
height: 100px;
border: 5px solid #999;
background: #ddd; 
position: relative;
}
.box{
display: inline-block;
background: pink;
width: 100px;
height: 100px;
transition: transform 500ms ease-in-out;
pointer-events: none;
position: absolute;
}
.trigger:hover .box{
transform: translate(100px, 75px) rotate(40deg) ;
        }

<div class="trigger">
    <div class="box"></div>
</div>

    

Answer 1

你需要做的就是添加一个z-index：

.trigger {
  width: 100px;
  height: 100px;
  border: 5px solid #999;
  background: #ddd; 
  position: relative;
}

.box {
  display: inline-block;
  background: pink;
  width: 100px;
  height: 100px;
  transition: transform 500ms ease-in-out;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.content {
  position: absolute;
  z-index: 1;
}

.trigger:hover .box {
  transform: translate(100px, 75px) rotate(40deg) ;
}

<div class="trigger">
    <div class="content">Content</div>
    <div class="box"></div>
</div>