Delay when animation was done

Refresh	March 2019
Views	36 time

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

a.kozubenko

3 answers

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

Vladislav Sivachuk

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>

frnt

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

Zooly

Related Issues

Last questions

Hot tags

javascript java c# python android php jquery c++ html ios css sql mysql .net c r asp.net ruby-on-rails objective-c arrays node.js sql-server iphone regex ruby angularjs json swift django linux asp.net-mvc xml wpf angular spring string ajax python-3.x git excel windows xcode multithreading pandas database reactjs bash scala algorithm eclipse html5 vba performance macos postgresql mongodb laravel oracle visual-studio list vb.net wordpress linq entity-framework winforms unit-testing matlab typescript image python-2.7 perl twitter-bootstrap numpy css3 qt swing hibernate c++11 shell apache amazon-web-services haskell maven forms azure facebook powershell rest function excel-vba delphi tsql ruby-on-rails-3 symfony google-chrome firebase api docker dataframe oop