javascript - jQuery - 使用 .hover 而不是 .click

Question

我的页面上有以下代码。

http://jsfiddle.net/SO_AMK/r7ZDm/

正如您所看到的，这是一个链接列表，每次单击链接时，都会在相关链接的正下方打开弹出框。

现在，我需要做的基本上是相同的，除了我需要使用 .hover 事件并延迟执行 2 秒。因此，用户不应单击，而应将光标保持在链接上 2 秒钟。

听起来很简单，但我无法让定位正常工作。这是我尝试过的:

$('a.showreranks').hover(function()
    {   
    $(this).data('timeout', window.setTimeout(function()
        {
            position = $(this).position();   
        $('#rerank_details').css('top', position.top + 17);   
        $('#rerank_details').slideToggle(300);    
        }, 2000));
    },
    function()
    {
        clearTimeout($(this).data('timeout'));
    });

有人可以修改它以使其工作吗？

Answer 1

尝试这样:

$('a.showreranks').hover(function()
{   
    var self = this;
    $(this).data('timeout', window.setTimeout(function() {
        var position = $(self).offset();   
        $('#rerank_details').css('top', position.top + 17);   
        $('#rerank_details').slideToggle(300);    
    }, 2000));
},
function()
{
    clearTimeout($(this).data('timeout'));
});

DEMO