Question

我是HTML，CSS的新手，如果我的问题不专业，抱歉。我试图找到有关动画后延迟但没有结果的信息。只有在此之前我的问题是：

我有两个按钮和div，当div上显示鼠标按钮时 - 我用visibility和hover解决了这个问题。但我需要延迟（当我将鼠标移出div时，按钮应该在5秒内可见。）

我看到动画延迟无法解决此问题。请帮助理解我是如何做到的。我的代码如下。

＆＃13;

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

＆＃13;

Answer 1

要将after div之后的元素选为button，这样使用CSS + selector，使用transition-delay可以延迟transition的{{1}}悬停时visibility，如下所示，

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

动画完成时延迟

3 个答案: