Question

当鼠标悬停在区域上时，我已经编写了这段代码来显示一个小面板，但是当我插入图像时，我最终得到了一种可怕的“摆动”效果。我该如何解决这个问题？

看看my codepen。相关摘录：

$('.italia g').mouseover(function (e) {
    var region_data = $(this).data('region');
    $('<div class="info_panel">' + 
        '<img src="  ' + region_data.region_image + ' " >' +
        '</div>'
    ).appendTo('body');
})
.mouseleave(function () {
    $('.info_panel').remove();
})
.mousemove(function(e) {
    var mouseX = e.pageX, //X coordinates of mouse
        mouseY = e.pageY; //Y coordinates of mouse

    $('.info_panel').css({
        top: mouseY - 100,
        left: mouseX - (($('.info_panel').width()/2)+175)
    });
});

Answer 1

问题是当悬停某个区域时，信息窗口位于光标正下方。一旦infowindow出现，鼠标就会触发mouseleave事件，因为它现在正在区域和位于区域上方的infowindow上空盘旋。

使用以下方法检查：

{{1}}

不再有摆动效果了。

鼠标摆动效果问题

1 个答案: