基于JavaScript的延迟CSS悬停/鼠标切换效应

Question

我找到了一个非常好的图片库脚本，这里只使用CSS：http://host.sonspring.com/hoverbox/。

唯一能阻止我使用的是悬停效果太快了。我想推迟大约一秒钟的悬停效果，这意味着图像不会放大，除非你鼠标停留一秒钟。我怎样才能用JavaScript做到这一点呢？

Answer 1

我认为这些步骤是可以做到的：

1. 更改CSS，使隐藏元素(“弹出”图像)不会在悬停时设置它们的display样式。这应该很简单，在CSS中可能没有太多的display规范。
2. 创建另一个CSS类来处理display属性(我想将它设置为block )。
3. 使用JavaScript，为缩略图元素向mouseover事件添加一个处理程序。在这种情况下，设置延迟，然后将新的CSS类应用到目标元素。(不要忘记在mouseout上删除该类。

如果你需要的话，我可能可以修改一下这个来得到一些概念的证明。不过，它会相当原始。一些潜在的障碍可能包括：

1. 当另一个元素显示在游标下时，mouseover是否仍然适用？如果没有，是否会引发mouseout，或者这些元素一旦打开就会保持打开状态？
2. 在每种情况下选择合适的元素可能会很棘手。如果我们需要更多的HTML结构或元素ID/样式，那么需要更多的工作来更新现有的CSS来匹配。

这是一个有趣的想法，所以我很乐意关注一个原型。但是，希望仅仅概述一下可能涉及到的内容就足以让你开始工作:)

编辑： Ok，我对尝试这个比我想象的更感兴趣。我有一个原型这里。悬停效应现在由jQuery来处理，而不是纯CSS。我唯一没有补充的就是延迟。我是调查它。

到目前为止，我所做的唯一改变是添加了JavaScript，并从CSS中的.hoverbox a:hover .preview中删除了display属性。就这样。

为了StackOverflow上的后代(而且我从来没有完全信任jsfiddle来保存东西)，下面是到目前为止的JavaScript代码：

$(document).ready(function() {
    $('.hoverbox a').mouseover(function() {
        $(this).children('.preview').show();
    });
    $('.hoverbox a').mouseout(function() {
        $(this).children('.preview').hide();
    });
});