从框后面的文本转换

我有一个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; 
}

来源

2017-10-10 Ehsan Musavi

从后面？我们如何注意到这一点？，你可以简单地做一个不透明的转变 –

如果你看到，我也有不透明的转变，但它出现在不在它后面的盒子！ –

是的这就是我的意思，通过这样做，我们如何注意到从z-index不能进行转换的背后转换......做z-index是无用的 –

两个问题。首先，在这两种情况下你都有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不是一个过渡性属性。也就是说，你不能从零到0.1到0.2之间转换为舍入1.0。 z-index是一个实际的层，你只能从一个层次到另一个层次。

来源

2017-10-10 19:50:13 Rob

你可以尝试这样的事情。随着透明度和顶/右过渡您可以创建到来背后的错觉：

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

来源

2017-10-10 19:50:47

从框后面的文本转换

回答

相关问题