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

Answer 2

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”上變為“ null”。
我還添加了幾行代碼，這些代碼將使您的工具提示跟隨鼠標移動 。