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是一个实际的图层，你只能从一个级别进入下一个级别。

Answer 2

您可以尝试这样的事情。通过不透明度和顶部/右侧过渡，您可以创造出落后的幻想：

.box {
  position:relative;
  margin:50px;
  padding:10px;
  border:1px solid;
  cursor:pointer;
}

.box p {
  position: relative;
  top: -10px;
  right: -5px;
  opacity: 0;
  transition: all .3s;
}

.box:hover p {
  top: 0;
  right:0;
  opacity: 1;
}

<div class="box">
<p>lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume  ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume lorem ipsume </p>
</div>

文本从框后面转换

2 个答案: