使用 hoverIntent 在鼠标悬停时显示 DIV答案

【问题标题】：Displaying DIV at mouse position on hover with hoverIntent使用 hoverIntent 在鼠标悬停时显示 DIV
【发布时间】：2012-01-12 02:47:02
【问题描述】：

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

目标是，当用户将鼠标悬停在此表中有关特定作业的行上时，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 时有效。

到目前为止，我在解决此问题时运气不佳，并且尝试了很多方法。有没有人有任何想法？

【问题讨论】：

你能粘贴你正在使用的 CSS 吗？鼠标移出时如何隐藏弹出窗口？
你有兴趣看到什么 CSS。在成功的 Ajax 调用下，CSS 将应用于消息 div。在这一点上，我什至无法让弹出窗口浮动，但将使用 jQuery show 和 hide 来隐藏弹出窗口。（此时它只是删除文本以隐藏它）

标签： jquery ajax tooltip hoverintent

【解决方案1】：

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

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

【讨论】：

我知道您来自哪里，但这并没有利用 hoverIntent 提供的好处。我想如果有办法构建 ajax 并且延迟它会起作用。
该插件使用hover内置jquery功能。它唯一添加的只是延迟，恕我直言，您可以将自己添加到脚本中。
啊，我明白了，所以您通过使用 mouseenter 来延迟鼠标在表格行中停留的时间，而不是在不打算显示时将鼠标悬停在可以显示的位置。我会试一试。干杯伙伴。
好的，所以只需在 JSFiddle 中记录您的示例，您会注意到弹出窗口直接显示在该行的下方。我想要实现的是弹出窗口显示在鼠标指针所在行的前面。我会继续努力。

【解决方案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('');
}

【讨论】：