jquery - 在图库缩略图中添加鼠标移出延迟效果

Question

在这个网页上，有一个我喜欢的缩略图鼠标悬停效果。
CSS3 或 jQuery 可以实现这种效果吗？
我搜索了很多找到这个效果，但我找不到一个。
请给我一个解决方案。

Answer 1

这个效果是用两个图像和 JavaScript 完成的。
他们将两个图像相互叠加，然后触发display. 当您非常快速地悬停元素时，这会产生非常糟糕的悬停效果。

所以对于这个效果，CSS3要好很多！只需向链接添加背景图像，向链接添加背景图像转换并在悬停元素时更改背景图像。

这是一个有效的 CodePen 演示

要更改效果或动画类型的持续时间，请查看此页面，它会告诉您所有不同的动画类型。

---

编辑
要使鼠标悬停时的过渡持续时间比鼠标悬停时更长，只需添加一条附加transition语句。
这又是一个有效的 Codepen 演示，其悬停持续时间为0.3 秒，悬停持续时间为1秒。

a{
   /* This is the transition, when you hover OUT the element */
   transition: background 1s;
}

a:hover{
   /* This is the transition, when you hover ON the element */
   transition: background 0.3s;
}