jquery使用鼠标坐标来偏移'工具提示'样式的悬停功能

Question

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

我的猜测是计算这个并返回div的新值是昂贵的和耗尽资源看到div的运动错开.

有谁知道如何提高这种方法的效率？

我使用了具有良好跟踪功能的工具提示插件,并且非常顺利地移动了元素.

我的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.事实上,本地代码是惊人的,但是当鼠标进入并离开目标div时,jsfiddle似乎只是更新了coords.

任何帮助非常感谢.

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