在鼠標懸停處顯示DIV與hoverIntent

好的，所以我有一張表包含有關作業的信息。在鼠標懸停處顯示DIV與hoverIntent

目標是，當用戶將此表中的行懸停在某個特定作業的某行上時，jQuery會進行Ajax調用，檢索有關作業的數據並將其顯示在彈出的鼠標位置。

我的JavaScript/jQuery是如下：

$('#report').find('tr').hoverIntent({ // mouseover 
    over: statusOnHover, 
    out: statusOffHover 
}); 


function statusOnHover(){ 
     $.ajax({ 
      type: "POST", 
      data: "data=" + $(this).attr('id'), 
      url: "ajax/latest_update.php", 
      success: function(msg){ 
       if (msg != ''){ 
        $("#message").html(msg); 
        $("#message").css({ 
         'position':absolute, 
         'top':event.pageY, 
         'left':event.pageX 
        }); 
       } 
      } 
     }); 
} 
function statusOffHover(){ 
    $("#message").html(''); 
}

所以，我們正在尋找一個錶行，然後當用戶打算在其上懸停（使用hoverIntent）它運行的鼠標功能。該函數調用latest_update.php腳本，該腳本基於從行ID拉取的job_id提供預格式化的HTML數據樣本。這個HTML數據然後被插入到消息div中。

現在，AJAX查詢運行正常，它將數據複製到div中，但CSS格式化使div浮動到鼠標指針不起作用。這個CSS在使用標準的.mouseover和.mouseout時可以工作。

我到目前爲止還沒有太多的運氣解決這個問題，並嘗試了很多東西。有沒有人有任何想法？

來源

2012-01-12 Linnay

可以粘貼您所使用的CSS？如何在mouseout上隱藏彈出窗口？ – Dave 2012-01-12 02:50:03

你有興趣看什麼CSS。在成功的Ajax調用下，CSS被應用於消息div。在這一點上，我甚至不能讓彈出窗口浮動，但將使用jQuery顯示和隱藏來隱藏彈出窗口。（在這一點上，它只是刪除文本來隱藏它） – Linnay 2012-01-12 02:52:10

不幸的是由Dave提供的答案沒有給出正確的解決方案。它在懸停時顯示div，但沒有在鼠標指針位置顯示必需的DIV。

問題在於，只有在鼠標移動時纔會調用顯示鼠標位置div的CSS以獲取所需的事件位置。

請注意，此解決方案仍然使用hoverIntent來管理延遲。

正確的代碼如下：

$('#report').find('tr').hoverIntent({ // mouseover 
    over: statusOnHover, 
    out: statusOffHover 
}); 

function statusOnHover(){ 
    $(this).mousemove(function(event){ 
     $('#message').css({'top':event.pageY,'left':event.pageX}); 
    }); 
    $.ajax({ 
     type: "POST", 
     data: "data=" + $(this).attr('id'), 
     url: "ajax/latest_update.php", 
     success: function(msg){ 
      if (msg != ''){ 
       $('#message').html(msg).show(); 

      } 
     }   
    }); 
} 
function statusOffHover(){ 
    $("#message").html(''); 
}

來源

2012-01-13 00:52:54 Linnay

我使其工作使用了mouseenter和鼠標離開，檢查此琴：http://jsfiddle.net/jv7YT/1/

$('#report').mouseenter(function(){ 
    //ajax call and show popup 
}).mouseleave(function(){ 
    // hide popup 
});

來源

2012-01-12 03:11:30 Dave

我明白你來自哪裏，但這沒有利用hoverIntent提供的好處。我想，如果有一種方法來建立阿賈克斯，並延遲它會工作。 – Linnay 2012-01-12 03:14:53

該插件使用懸停內置的jquery函數。它增加的唯一的東西只是一個延遲，恕我直言，你可以添加自己的腳本。 – Dave 2012-01-12 03:19:40

啊我看到了，所以你可以延遲鼠標停留在表格行的時間，通過使用鼠標輸入而不是鼠標懸停在可能會顯示的位置，而不是打算顯示的位置。我會給這個鏡頭。隊友的歡呼聲。 – Linnay 2012-01-12 03:21:42

在鼠標懸停處顯示DIV與hoverIntent

回答

相關問題