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

时间:2012-09-20 09:47:02

标签: jquery html hover mouseevent coordinates

我正在尝试创建一个小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。事实上,本地代码是惊人的,但是当鼠标进入并离开目标div时,jsfiddle似乎只是更新了coords。

任何帮助非常感谢。

1 个答案:

答案 0 :(得分:14)

我想你想要像鼠标一样移动

 $(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