jQuery jquery使用鼠标坐标来抵消“工具提示”样式的悬停功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12510063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery using mouse coordinates to offset 'tooltip' style hover function
提问by lharby
I am trying to create a small div which appears when a particular element is hovered over. I also want to offset the position of the div using mouse co-ordinates that change as the client moves the mouse.
我正在尝试创建一个小 div，它在特定元素悬停时出现。我还想使用随着客户端移动鼠标而变化的鼠标坐标来偏移 div 的位置。
My guess is that to calculate this and return the new values for the div is expensive and draining resources seeing as the div's movement staggers.
我的猜测是，计算这个并返回 div 的新值是昂贵的，并且会消耗资源，因为 div 的移动是交错的。
Does anyone know how to make this method more efficient?
有谁知道如何使这种方法更有效？
I have used the tooltip pluginwhich has a nice tracking feature, and moves the element really smoothly.
我使用了工具提示插件，它具有很好的跟踪功能，并且非常平滑地移动元素。
My js;
我的js；
$(document).ready(function(){
$('#utilities').mouseover(function(event) {
var left = event.pageX - $(this).offset().left + 100;
var top = event.pageY - $(this).offset().top + 130;
$('#gas-electric-hover').css({top: top,left: left}).show();
//console.log (left, top);
});
$('#utilities').mouseout(function() {
$('#gas-electric-hover').hide();
});
});
I've also created this jsfiddle. In fact locally this code is staggering but the jsfiddle only appears to be updating the coords as the mouse enters and leaves the target div.
我还创建了这个jsfiddle。实际上，在本地，此代码令人震惊，但 jsfiddle 似乎仅在鼠标进入和离开目标 div 时更新坐标。
Any help greatly appreciated.
非常感谢任何帮助。
回答by Yograj Gupta
I think you want mousemove like
我想你想要鼠标移动
$(document).ready(function(){
$('#utilities').mousemove(function(event) {
var left = event.pageX - $(this).offset().left + 100;
var top = event.pageY - $(this).offset().top + 130;
$('#gas-electric-hover').css({top: top,left: left}).show();
//console.log (left, top);
});
$('#utilities').mouseout(function() {
$('#gas-electric-hover').hide();
});
});
Check this updated jsFiddle
检查这个更新的jsFiddle
