鼠標懸停延遲，以顯示一個孩子div

Question

使用CSS轉換，我想添加一個延遲0.5s懸停在類「激活」。 經過這些0.5s後，它應該改變「content-l1」類從顯示：無到顯示：塊

我試過用這段代碼，但根本不工作。

.content-l1 { 
 
    transition: 0s display; 
 
} 
 

 
.activator:hover>.content-l1 { 
 
    display: block; 
 
    transition-delay: 0.5s; 
 
}

<div class="activator"> 
 

 
    <div class="content-l1"> // initially: display:none whatever content here 
 
    </div> 
 

 
</div>

Answer 1

display沒有動畫過渡。 ü可以使用opacity

.content-l1 { 
 
    transition: 0s; 
 
    opacity: 0; 
 
} 
 

 
.activator:hover>.content-l1 { 
 
    opacity: 1; 
 
    transition-delay: 0.5s; 
 
}

<div class="activator"> 
 
    fjhfjh 
 
    <div class="content-l1"> 
 
    afsfas 
 
    </div> 
 
</div>

但塊 '內容-L1' 發生。我們需要用position

.activator { 
 
    position: relative; 
 
} 
 

 
.content-l1 { 
 
    position: absolute; 
 
    background-color: white; 
 
    padding: .4em; 
 
    border: 1px solid black; 
 
    transition: 0s; 
 
    opacity: 0; 
 
} 
 

 
.activator:hover>.content-l1 { 
 
    opacity: 1; 
 
    transition-delay: 0.5s; 
 
}

<div class="activator"> 
 
    fjhfjh 
 
    <div class="content-l1"> 
 
    afsfas 
 
    </div> 
 
</div> 
 
qwewertrtw