Question

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

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

Answer 1

更改您的onmouseout事件，使用setTimeout

调用JS函数

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

其中5000是您想要延迟的时间（以毫秒为单位）。

Answer 2

你可以使用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>

Answer 3

请参阅此示例，使用<img>事件更改src onmouseover并等待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' />

Answer 4

使用带有transition-delay属性的CSS过渡。

＆＃13;

.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')
}

＆＃13;

<div class="classname"></div>

<div class="image"></div>

＆＃13;

Answer 5

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

<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

有没有办法在悬停效果上添加延迟？

5 个答案: