让 :hover 过渡完成，即使没有悬停在元素上答案

【问题标题】：Letting :hover transition complete even when not hovering on element让 :hover 过渡完成，即使没有悬停在元素上
【发布时间】：2012-04-17 07:53:09
【问题描述】：

我一直在建立一个摄影网站here，但我遇到了画廊页面中的 :hover 转换的问题。它加载了两个覆盖缩略图的链接，一个在 fancybox 中打开图像，另一个将图像设置为背景。

一切正常，但如果您在过渡完成之前将鼠标悬停在缩略图上，它会以动画方式恢复到其原始状态。

有没有办法让过渡在恢复到空闲状态之前播放？

【问题讨论】：

标签： css hover css-transitions pseudo-element

【解决方案1】：

假设 JavaScript 不是不可能的，jQuery will certainly let you have this behaviour 使用 .hover() 方法接受两个回调，一个用于悬停，一个用于悬停停止。

$("div.thumb").hover(function(){
    // show the magnifying glasses
    $(this).animate({ top: "0", opacity: 1 });
}, function() {
    // hide the magnifying glasses
    $(this).animate({ top: "-100px", opacity: 0 });
});

【讨论】：