在图库缩略图中添加mouseout延迟效果

Question

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

Answer 1

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

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

Here is a working CodePen Demo

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

---

修改
要将鼠标悬停在鼠标悬停时的转换持续时间比悬停鼠标时要长，只需添加一个transition声明。
Here再次是一个有效的Codepen Demo，其 0.3s 悬停持续时间和 1s 悬停持续时间。

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