用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数据插入到message div中。
现在AJAX查询运行良好，它将数据复制到div中，但是使div浮动到鼠标指针的CSS格式化不起作用。当使用标准的.mouseover和.mouseout时，这个CSS确实可以工作。
到目前为止，我没有太多的机会来解决这个问题，我已经尝试了很多方法。有谁有什么想法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-01-13 00:52:54
不幸的是，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('');
}Stack Overflow用户
发布于 2012-01-12 03:11:30
我使用mouseenter和mouseleave让它工作，检查这个小提琴：http://jsfiddle.net/jv7YT/1/
$('#report').mouseenter(function(){
//ajax call and show popup
}).mouseleave(function(){
// hide popup
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8829497
复制相关文章
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
