0

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

目标是，当用户将鼠标悬停在此表中有关特定作业的行上时，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 中，但是使 div 浮动到鼠标指针的 CSS 格式不起作用。此 CSS 在使用标准 .mouseover 和 .mouseout 时有效。

到目前为止，我没有太多的运气来解决这个问题，并且尝试了很多事情。有没有人有任何想法？

4

2 回答 2

0

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

$('#report').mouseenter(function(){
    //ajax call and show popup 
}).mouseleave(function(){ 
    // hide popup 
});
于 2012-01-12T03:11:30.490 回答
0

不幸的是，戴夫提供的答案没有给出正确的解决方案。它确实在悬停时显示了 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-13T00:52:54.213 回答