Verzögerung bei Animation wurde getan

Question

Ich bin neu in HTML, CSS, sorry, wenn meine Frage nicht professionell ist. Ich habe versucht, Informationen über die Verzögerung nach der Animation zu finden, aber ohne Ergebnisse. Nur vorher. Meine Frage ist:

Ich habe zwei Tasten und div, wenn die Maus auf div - Tasten angezeigt werden soll - ich löste es mit visibility und . aber ich brauche eine Verzögerung (wenn ich die Maus aus dem Div ziehe, sollten die Buttons 5 Sekunden länger sichtbar sein).

Als ich sah, Animation-Verzögerung hat dieses Problem nicht beheben. Bitte helfen Sie mir zu verstehen, wie ich es machen kann. Mein Code ist unten.

#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

Um ein Element vorhanden after div als button über hier zu wählen, so dass für diese Verwendung CSS + selector, transition-delay verwenden Sie die transition von visibility auf schweben verzögern können, wie weiter unten,

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

Sie könnten einen Übergang auf Hover Eigenschaften verwenden und eine transition-delay auf sie.

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

Answer 3

Sie können auch einige JavaScript-Code verwenden (mit jQuery-Bibliothek enthalten).

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