如何在悬停时制作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>