2

我的页面上有以下代码。

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

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

4

2 回答 2

4

试试这样：

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

演示

于 2012-06-21T17:53:24.163 回答
0

jsFiddle 演示

$('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 时“无效”。
我还添加了几行代码，使您的工具提示跟随鼠标移动。

于 2012-06-21T17:59:29.823 回答