如何在父/子DIV上執行相同的轉換

Question

我試圖在Div懸停上創建兩個轉換效果。首先一個圓圈會畫出，一個文字也會隨着圓圈出現。

我寫了下面的代碼，它首先繪製圓圈，然後繪製文本。我希望這兩件事情都能夠真實地發生。請檢查我的代碼並引導我。

JSFIDDLE

<div class="outer"> 
    <div class="inner"> 
     <div class="text"> Description </div> 
    </div> 
</div> 

CSS

<style> 
    body 
    { 
     background-color:black; 
    } 

    .outer 
    { 
     background-color:green; 
     position:absolute; 
     top:50px; 
     height:200px; 
     width:200px; 
     border-radius:50%; 
     border:10px solid white; 
     overflow:hidden; 



    } 

    .inner 
    { 
     background-color:silver; 
     opacity:0.2px; 
     position:absolute; 
     top:0px; 
     height:0px; 
     width:200px; 
     border-radius:60%; 
     visibility:hidden; 

    } 


.text 
{ 
     background-color:silver; 
     opacity:0.2px; 
     position:absolute; 
     top:0px; 
     height:0px; 
     width:200px; 
     line-height:0px; 
     visibility:hidden; 
}  

    .outer:hover >.inner 
    { 
     #line-height:10px; 
     text-align:center; 
     opacity:0.2px; 
     height:200px; 
     width:200px; 

     transition:height 2s; 
     transition-timing-function: ease-in; 
     visibility:visible; 

    } 


.inner:hover > .text 
{ 

     line-height:200px; 
     text-align:center; 
     opacity:0.2px; 
     height:200px; 
     width:200px; 
     #background-color:blue; 

     transition:line-height 2s; 
     transition-timing-function: ease-in; 
     visibility:visible; 


} 



    </style> 

Answer 1

這個CSS替換你的CSS：

body 
{ 
    background-color:black; 
} 

.outer 
{ 
    background-color:green; 
    position:absolute; 
    top:50px; 
    height:200px; 
    width:200px; 
    border-radius:50%; 
    border:10px solid white; 
    overflow:hidden; 
} 

.inner 
{ 
    background-color:silver; 
    opacity:0.2px; 
    position:absolute; 
    top:0px; 
    height:0px; 
    width:200px; 
    border-radius:60%; 
    visibility:hidden; 

} 

.text 
{ 
    opacity:0.2px; 
    position:absolute; 
    top:0px; 
    height:0px; 
    width:200px; 
    line-height:0px; 
    visibility:hidden; 
} 

.outer:hover > .inner 
{ 
    line-height:10px; 
    text-align:center; 
    opacity:0.2px; 
    height:200px; 
    width:200px; 

    transition:height 2s; 
    transition-timing-function: ease-in; 
    visibility:visible; 

} 

.outer:hover > .inner .text 
{ 
    line-height:200px; 
    text-align:center; 
    opacity:0.2px; 
    height:200px; 
    width:200px; 
    transition:line-height 2s; 
    transition-timing-function: ease-in; 
    visibility:visible; 
} 

問題是懸停。兩個懸停加入。外部懸停和內部懸停。當內部懸停被觸發時，文本即將到來。

內懸停改爲

.outer：懸停> .inner的.text

現在都將在同一時間降下來。