動畫完成時的延遲

Question

我是新來的HTML，CSS，抱歉如果我的問題不專業。 我試圖找到有關動畫後延遲但沒有結果的信息。只有在之前。我的問題是：

我有兩個按鈕和div，當div上的按鈕應該顯示鼠標 - 我解決它與visibility和hover。但我需要延遲（當我將鼠標移出div時，按鈕應該可見5秒多）。

正如我所看到的動畫延遲不能解決這個問題。請幫助理解我如何做到這一點。我的代碼是波紋管。

#deleteRow { 
 
    width: 80px; 
 
    height: 80px; 
 
    background-color: #881013; 
 
    border: none; 
 
    background-image: url("minus.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    left: -84px; 
 
    padding: 0px; 
 
    margin: 0; 
 
    position: absolute; 
 
    visibility:hidden; 
 
} 
 

 
#deleteCol { 
 
    width: 80px; 
 
    height: 80px; 
 
    background-color: #881013; 
 
    border: none; 
 
    background-image: url("minus.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    top: -84px; 
 
    right: 0px; 
 
    padding: 0px; 
 
    margin: 0; 
 
    position: absolute; 
 
    visibility:hidden; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    display: inline-block; 
 

 
} 
 

 
.container:hover #deleteRow { 
 
    visibility:visible; 
 
    
 
} 
 

 
.container:hover #deleteCol { 
 
    visibility:visible; 
 
    
 
    
 
}

Answer 1

要選擇目前after div元素爲button過這裏，所以對於使用CSS + selector，使用transition-delay可以延遲的visibility上懸停transition，如下，

div { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    margin-bottom: 20px; 
 
} 
 

 
button { 
 
    transition: 1s ease; 
 
    transition-delay: 5s; 
 
} 
 

 
div:hover + .btn1 { 
 
    visibility: hidden; 
 
} 
 

 
div:hover + .btn1 + .btn2 { 
 
    visibility: hidden; 
 
}

<div></div> 
 
<button class="btn1">Click - 1</button> 
 
<button class="btn2">Click - 2</button>

Answer 2

你可以使用你的懸停性能的轉變，並把transition-delay就可以了。

https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

Answer 3

您還可以使用一些JavaScript代碼（與包括jQuery庫）。

$(".container").mouseenter(function(){ 
    $("#deleteRow,#deleteCol").css("visibility","visible"); 
}); 
$(".container").mouseout(function(){ 
    setTimeout(function(){ 
    $("#deleteRow,#deleteCol").css("visibility","hidden"); 
    }, 5000); 
});