有没有一种方法可以在悬停效果上添加延迟?

Is there a way to add a delay on a hover efect?

本文关键字：悬停 添加 延迟 一种 方法 有没有      更新时间：2023-09-26

我想要完成的是，当图像在悬停后发生变化时，它会保持几秒钟，然后它会返回到原始图像。
我想知道的是是否有办法增加这种延迟。我在下面附上了我的代码。

<html>
<body>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg'
     width='142' height='162'
     onmouseover="this.src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';"
     onmouseout="this.src=http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';" />
</body>
</html>

使用transition-delay属性的CSS转场

.classname {
  width: 100px;
  height: 100px;
  background-color: red;
  transition-property: background-color;
  transition-delay: 1s;
  transition-duration: 0.1s;
}
.classname:hover {
  transition-delay: 0s;
  background-color: blue;
}
.image {
  width: 142px;
  height: 162px;
  background-image: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');
  background-size: 100% 100%;
  transition-property: background-image;
  transition-delay: 1s;
  transition-duration: 0.1s;
}
.image:hover {
  transition-delay: 0s;
  background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg')
}
<div class="classname"></div>
<div class="image"></div>

将onmouseout事件更改为使用setTimeout调用JS函数

setTimeout(function(){
      this.src= "...";
 }, 5000);

其中5000是要延迟的时间，以毫秒为单位

你可以直接使用CSS转场。

.button {
   background-color: #222;
   color: #fff;
   padding: 14px 36px;
   text-decoration: none;
   transition: 0.6s background-color ease
}
.button:hover {
    background-color: #555;
}
<a href='#' class='button'>Hover me</a>

看这个例子，用onmouseover事件改变<img> src，等待3秒，然后回到原始图像onmouseout

//copy original img to variable
var original = $("img")[0].src;
//mouse over event
$("img").mouseover(function() {
  $(this).fadeOut("fast").fadeIn("fast");
  //change image
  $(this)[0].src = "http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg";
});
//mouse out event
$("img").mouseout(function() {
  var img = $(this);
  //on mouse over wait 3 second and getback to original img
  setTimeout(function() {
    img.fadeOut("fast").fadeIn("fast");
    img[0].src = original;
  }, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162' />

有几种方法可以做到这一点。您可以尝试下面的代码片段:

<div>
    <img src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg' width='142' height='162'/>
    <img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162'/>
  </div>
div{
  width:142px; 
  height:162px;
  overflow: hidden; /*required*/
}
div img{
  position: absolute;
  transition: opacity .5s ease;
  transition-delay: .5s; /*time of transition that you want*/
}
div img:hover{
  opacity: 0;
}

另一种方法是使用这些图像的背景并管理每个图像。

完整示例:jsbin

相关文章：