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

Answer 2

$('ul').on('mousemove','li',function(e){
    
    var m = {x: e.pageX, y: e.pageY};
    $('#rerank_details').css({left: m.x+20, top: m.y-10});
    
}).on('mouseenter','li',function(){
    
    var t = setTimeout(function() {
        $('#rerank_details').stop().slideDown(300);
    },2000);
    $(this).data('timeout', t);
    
}).on('mouseleave','li',function(){
    
    $('#rerank_details').stop().slideUp(300);
    clearTimeout($(this).data('timeout'));
    
});

setTimeout的行为类似于悬停意图，实际上会将执行延迟2秒

并计算在被悬停的元素的data属性中停留的时间-在mouseleave上被“空”。

我还添加了几行代码，使您的工具提示跟随鼠标移动。