Question

我的页面上有以下代码。

如您所见，它是一个链接列表，每次点击一个链接时，弹出框就会在相关链接的正下方打开。

现在，我需要做的基本上是相同的，除了我需要使用.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

Answer 2

jsFiddle demo

$('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属性内的时间element - 在mouseleave上获得'nulled' 我还添加了几行代码，使您的工具提示跟随鼠标移动。

jQuery - 使用.hover而不是.click

2 个答案:

jsFiddle demo