CODEWITHSUNDEEP
htmlcss
a.kozubenko
a.kozubenko

Reputation: 1060

Delay when animation was done

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;
    
    
}

Upvotes: 1

Views: 45

Answers (3)

frnt
frnt

Reputation: 8795

To select an element present after div as button over-here, so for that use CSS + selector, using transition-delay you can delay the transition of visibility on hover, as below,

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>

Upvotes: 2

Vladislav Sivachuk
Vladislav Sivachuk

Reputation: 52

You also can use some JavaScript code (with jQuery library included).

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

Upvotes: 0

Zooly
Zooly

Reputation: 4787

You could use a transition on your hover properties, and put a transition-delay on it.

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

Upvotes: 0

Related Questions