css - 从框后面转换文本

Question

我有一个包含文本段落标记的 div 元素。当我悬停这个 div 时，我希望文本从 div 中(从后面)出来。我试过负 z-index 但它没有用。

.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;
}

Answer 1

两个问题。首先，你有 visibility:hidden在这两种情况下，元素都不会显示。

第二个问题是，<p> 时 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 不是过渡属性。也就是说，您不能在通往四舍五入的 1.0 的过程中从零过渡到 0.1 再到 0.2。 z-index 是一个实际层，您只能以整个单位从一层到下一层。