css - 文本从盒子后面转换

我有一个div元素，其中包含文本的段落标签。当我将鼠标悬停在此div上时，我希望文本从div出来（从后面）。我尝试使用负Z索引，但是没有用。

.box p {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  transition: top .3s, opacity .3s, visibility .3s, z-index .3s;
}

.box:hover p {
  top: -28px;
  opacity: 1;
  z-index: 1;
  visibility: visible;
}

最佳答案

两个问题。首先，在两种情况下都具有visibility:hidden，因此该元素将永远不会显示。

第二个问题是，当<p>不可见或悬停在div上时，div没有高度，因此您根本无法将其悬停在上面。

要解决此问题以帮助您上路：

div {height:100px;}
.box p {
  display: block;
    height:300px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  transition: top .3s, opacity .3s, visibility .3s, z-index .3s;
}
.box:hover p {
  top: -28px;
  opacity: 1;
  z-index: 1;
}

但这可能是您的理想方法，您需要对其进行调整。

请注意，在悬停时，您有top: -28px;，因此它在屏幕右侧略微滚动了。

编辑：
我想让您注意的另一件事。 z-index不是过渡属性。也就是说，您不能从零到0.1到0.2过渡到四舍五入到1.0。 z-index是一个实际图层，您只能将整个单位从一个级别转到下一个级别。