在鼠标悬停处显示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

回答

相关问题