在另一個沒有顯示的地方顯示元素：無

Question

我需要一個元素出現在另一個元素的位置，讓我們來看一下爲了示例而懸停的元素。我需要使用CSS動畫來平滑過渡。所以我不能使用顯示屬性。相反，我必須使用這個，對吧？

div { 
    visibility: hidden; 
    opacity: 0; 
} 

但是我的元素需要重疊，因爲在其中一個是，另一個必須顯示。有了顯示屏，這很容易，但是對於這一點，我不知道如何做到這一點，而不會太雜亂。

有人可以幫我嗎？這裏是我的代碼的基本輪廓：

.first-outline .first:hover { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 
.first-outline .second { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 
.first-outline:hover second { 
 
    visibility: initial; 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<li class="list-group-item first-outline"> 
 
    <p class="first">First</p> 
 
    <p class="second">Second</p> 
 
</li> 
 

 
<!-- Or something like this, but it still doesn't work --> 
 

 
<li class="list-group-item second-outline"> 
 
    <span class="first">First</span> 
 
    <span class="second">Second</span> 
 
</li>

謝謝。

Answer 1

給容器一個positon: relative和內部divs positin: absolute然後玩懸停狀態和不透明度。

平滑效果

.first-outline { 
 
    position:relative; 
 
} 
 

 
.first-outline .first, .first-outline .second { 
 
    position: absolute; 
 
    top: 0 ; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    transition: opacity 500ms linear; 
 
    -webkit-transition: opacity 500ms linear; 
 
    -moz-transition: opacity 500ms linear; 
 
} 
 
    
 
.first-outline:hover .first, .first-outline .second { 
 
    opacity: 0; 
 
} 
 

 
.first-outline:hover .second { 
 
    opacity: 1; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
<li class="list-group-item first-outline"> 
 
    <p class="first">First</p> 
 
    <p class="second">Second</p> 
 
</li>