jquery使用鼠标坐标来偏移'tooltip'风格的悬停功能

Question

我正在尝试创建一个小 div，它会在特定元素悬停时出现。我还想使用随着客户端移动鼠标而变化的鼠标坐标来偏移 div 的位置。

我的猜测是，计算此值并返回 div 的新值是昂贵的，并且由于 div 的移动交错而消耗资源。

有谁知道如何使这种方法更有效？

我使用了tooltip plugin，它具有很好的跟踪功能，并且可以非常流畅地移动元素。

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

我也创建了这个jsfiddle。事实上，在本地，这段代码是惊人的，但 jsfiddle 似乎只在鼠标进入和离开目标 div 时更新坐标。

非常感谢任何帮助。

Answer 1

我想你想像鼠标移动一样

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

查看此更新jsFiddle