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

所以我们找到一个表行，然后当用户想要悬停在它上面时（使用hoverIntent）它会在函数上运行鼠标。此函数调用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/

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

Answer 2

不幸的是，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('');
}

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

2 个答案: