I'm new in HTML, CSS, sorry if my question is not professional. I tried to find information about delay after animation but without results. Only before. My question is:
I have two buttons and div, when mouse on div - buttons should be shown - I resolved it with visibility
and hover
. but I need delay (when I move mouse out of div, buttons should be visible 5 sec more).
As I saw animation-delay does not resolve this issue. Please help to understand how I can do it. My code is bellow.
#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;
}