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

は、実際に実行を2秒間遅らせ、ホバーされた要素の属性内でホバーされた時間をカウントするホバーインテントsetTimeoutのように機能します。これは、マウスリーブで「null」になります。ツールチップをmousemoveに追従 させるコードも数行追加しました。
data

于 2012-06-21T17:59:29.823 に答える