Javascript 鼠标摆动效果的问题

我写这段代码是为了当鼠标在区域上时显示一个小面板，但是当我插入一个图像时，我得到了一个可怕的晃动效果。我怎样才能解决这个问题

看一看。相关摘录：

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

---

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

使用以下选项进行检查：

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

---

不再有晃动的效果。

谢谢：我差点被这个效果弄得晕头转向：我改进了你问题的拼写和格式。我还在你的问题中添加了一段代码。