css - 让:hover transition complete even when not hovering on element

Question

我一直在建立一个摄影网站 here但我对图库页面中的 :hover 过渡有疑问。它加载两个位于缩略图上的链接，一个在 fancybox 中打开图像，另一个将图像设置为背景。

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

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

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