jquery使用鼠标坐标来抵消“工具提示”样式的悬停功能

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 plugin which 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。实际上，在本地，这段代码令人震惊，但在鼠标进入和离开目标div时，jsfiddle似乎只是在更新coord。

Any help greatly appreciated.

任何帮助深表感谢。

1 个解决方案

#1

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

#1