從框後面的文本轉換

我有一個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

從框後面的文本轉換

回答

相關問題