Javascript JQuery交互式地图

这里有一个JQuery neewbie在制作JQuery解决方案时有点头疼

我正在尝试制作一张互动的世界地图。用户可以将鼠标悬停在一个标记（地图上的特殊点）上，这会使一个信息框中显示名称和一些有关该地点的信息。当我用光标离开标记时，框再次淡出

下面的代码是html标记，带有挪威国家的锚定标记，与德国、意大利、英国等国家的锚定标记相同，但位置当然不同

<div id="mapWrapper">
    <div id="map_container">
        <a class="marker" style="top:14%; left:34%;" data-info="norway"></a>
        <div class="info_box"></div>
        <div class="info" id="norway">
        <h2>Norway - Scandinavia</h2> 
            lorem ipsum lorem ipsum lorem ipsum
    </div>
</div>
        <a class="marker" style="top:10%; left:55%;" data-info="iran"></a>
        <div class="info_box"></div>
        <div class="info" id="iran">
        <h2>Iran Republic - Asia</h2> 
            lorem ipsum lorem ipsum lorem ipsum
    </div>
</div>

这里的问题是，每当我将鼠标悬停在一个标记上时，它会给我两个相同的信息框，而不是只有一个。当我用Firebug检查它时，两个框都是同一个div。我知道ive

display:none

是从CSS中得到的，所以当JQuery运行时，它会显示一个新的.info\u框，以及“隐藏”框吗？因为

addCLass

可能

如下图所示，上面有信息框的白色标记是正确的，但我不明白为什么第二个信息框会出现在右边

我现在有点困惑，有点不知所措，我似乎无法“理解”

---

任何帮助、提示或窍门都将得到普遍的感谢。

一旦盒子有了唯一的标识，这应该不是问题

步骤1

创建你想在地图中使用的所有div，并给它们相同的类名，但不同。我会将这个类aa设置为display none
乙二醇

---

如果DOM中已经有了这些信息，那么为什么要首先创建一个新元素？页面上有多少个

.info\u box

$（“.info_box”）

将返回一个集合，因此您需要确保为正确的实例设置html。到目前为止，只有两个国家，挪威和伊朗，它们都有

div class=“info_box”

，因此页面上总共有两个框。

$(document).ready(function(){
    $('a.marker').mouseover(function(){
        var $link = $(this);
        var countryName = $link.data('info');
        var linkPosition = $link.position();
        var infoBoxTopPos = linkPosition.top - 130 + "px";
        var infoBoxLeftPos = linkPosition.left - 120+ "px";
        var container = $('.info' + '#' + countryName).html();
        $('a.marker').removeClass('current');
        $link.addClass('current');
        $('.info_box').html(container).css({
            'top' : infoBoxTopPos,
            'left' : infoBoxLeftPos
        }).show();
    }).mouseleave(function(){
        /*$('.info_box').fadeOut(100);*/
    });
});

 <div class"aa" id="norway" >
norway is a nice country
</div>

$("body").on('mouseover','.marker',function()

{

$('.aa').hide();

$("#"+this.value).show();

});