使用hoverIntent在鼠标悬停时在鼠标位置显示DIV

Question

好的，我有一个包含有关工作信息的表。

目标是，当用户将鼠标悬停在该表中有关特定作业的行时，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('');
}

因此，我们找到一个表行，然后当用户打算将鼠标悬停在其上（使用悬停意图）时，它会运行鼠标悬停功能。该函数调用latest_update.php 脚本，该脚本根据从行ID 中提取的job_id 提供预格式化的HTML 数据示例。然后将此 HTML 数据插入到消息 div 中。

现在，AJAX 查询运行良好，并将数据复制到 div 中，但使 div 浮动到鼠标指针的 CSS 格式不起作用。当使用标准 .mouseover 和 .mouseout 时，此 CSS 确实有效。

到目前为止，我还没有很好地解决这个问题，并且已经尝试了很多方法。有人有什么想法吗？

Answer 1

我使用 mouseenter 和 mouseleave 使其工作，检查这个小提琴： http://jsfiddle.net/jv7YT/1/< /a>

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

Answer 2

不幸的是戴夫提供的答案没有给出正确的解决方案。它确实在悬停时显示了 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('');
}