javascript - 如何使 HTML 框在悬停时滑动并使用 JS 或 CSS 显示其下方的文本

Question

长期以来，我一直在尝试使用 CSS 或 JS 使 HTML 框在悬停时滑动并显示其下方的文本。我是 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>