CSS图像滚动地图和jQuery：如何使用第二个列表？

Question

我目前正在使用这个可单击的地图（Wolf's map），但我想使用除了作为脚本基础的国家之外的第二个国家/地区列表。出于演示原因，第二个菜单不能与地图相同的DIV。我一直在通过JQuery文档进行搜索，以了解如何触发另一个元素上的操作，而不是所选的元素，但我不确定我是否正确 - 可能不是因为它无法正常工作。

原来的剧本是这样的：

$(document).ready(function(){ 

var new_map='<span class="map"><span class="s1" /><span class="s2" /><span class="s3" /><span class="s4" /><span class="s5" /><span class="s6" /><span class="s7" /><span class="s8" /><span class="s9" /><span class="s10" /><span class="s11" /><span class="s12" /><span class="s13" /><span class="s14" /><span class="s15" /><span class="s16" /><span class="s17" /><span class="s18" /></span>'; 
var new_bg=$("<span>"); 
new_bg.addClass("bg"); 
$("#europe li a").append(new_map); 
$("#europe li a").append(new_bg); 

}); 

我想这样做是徘徊另一个元素是不是#europe李一当触发同样的动作。我曾经尝试这样做：

$(document).ready(function(){ 

var new_map='<span class="map"><span class="s1" /><span class="s2" /><span class="s3" /><span class="s4" /><span class="s5" /><span class="s6" /><span class="s7" /><span class="s8" /><span class="s9" /><span class="s10" /><span class="s11" /><span class="s12" /><span class="s13" /><span class="s14" /><span class="s15" /><span class="s16" /><span class="s17" /><span class="s18" /></span>'; 
var new_bg=$("<span>"); 
new_bg.addClass("bg"); 
$("#carteeurope li a").append(new_map); 
$("#carteeurope li a").append(new_bg); 

$("#menudroite li a").hover(function(){ 
$(new_map).appendTo("#carteeurope li a"); 
$(new_bg).appendTo("#carteeurope li a"); 
}); 

}); 

它使东西，但没有预期的效果：它看起来像地图的确可以，但不能移动到好位置（一些国家得到一个白色背景后的第二个菜单中的一些徘徊） 。

如果你能帮助我，我将不胜感激！

问候。

PS：一些相关的HTML和CSS部分。

原始列表

<div id="b"> 
    <ul id="europe" class="bottom five_columns"> 
     <li id="europe1"><a href="#" title="Albania">Albania</a></li> 
     <li id="europe2"><a href="#" title="Andorra">Andorra</a></li> 
     <li id="europe3"><a href="#" title="Austria">Austria</a></li> 
     ... 

我想的菜单

#europe,#europe span.bg{background:transparent url('europe-600px.png') no-repeat -9999px 0} 
#europe{position:relative;top:0;left:0;display:block;background-position:0 -966px;list-style:none} 
#europe *{padding:0;margin:0;border:0 none;outline:0 none} 
    #europe li{cursor:pointer} 
    #europe li span{position:absolute;display:block;width:0;height:0;z-index:15} 
    #europe li a span.bg{z-index:3} 
    #europe li .map{top:0;left:0} 
... 
#europe li span{position:absolute;display:block;top:0;left:0;width:0;height:0;z-index:15} 
#europe1 a:hover .bg{top:395px;left:303px;width:20px;height:40px;background-position:-10px -10px} #europe1 .s1{top:401px;left:303px;width:15px;height:32px} #europe1 .s2{top:397px;left:305px;width:8px;height:4px} #europe1 .s3{top:418px;left:318px;width:4px;height:9px} 
#europe2 a:hover .bg{top:385px;left:133px;width:5px;height:6px;background-position:-35px -10px} #europe2 .s1{top:383px;left:131px;width:9px;height:10px} 
... 

Answer 1

问题与此功能解决：

$("#menudroite li.menudroitepays a").hover(
    function(){ 
    var country=$(this).attr("id"); 
    $("#europe" + country + " a").addClass("active"); 
    }, 
    function(){ 
    var country=$(this).attr("id"); 
    $("#europe" + country + " a").removeClass("active"); 
    } 

Answer 2

至于添加

<div id="menudroite"> 
<ul> 
<li><a href="#">Accueil</a></li> 
<li><a href="#" title="France">France</a></li> 
<li><a href="#" title="Grèce">Grèce</a></li> 
... 

原来的CSS为我的理解（猜测），您的问题是，当你将鼠标悬停在anchor标签上时地图变空了。我觉得你的问题可以通过追加到#carteeurope li a

实际代码之前，克隆的new_map & new_bg是固定的，

$("#menudroite li a").hover(function(){ 
    $(new_map).appendTo("#carteeurope li a"); 
    $(new_bg).appendTo("#carteeurope li a"); 
}); 

我建议你做以下事情，

$("#menudroite li a").hover(function(){ 
    var cache_new_map = new_map; //cache the new_map 
    var cache_new_bg = new_bg; //cache your span 
    $(cache_new_map).appendTo("#carteeurope li a"); 
    $(cache_new_bg).appendTo("#carteeurope li a"); 
}); 

原因caching你的new_map & new_bg是如果你打算追加的源元素一些其他元素，将源元素会从原来的位置

PS删除：其实我不明白你的问题，我只猜到了上述可能是你的问题，你如果您提供了在线演示（链接到您的工作页面），可以从该社区周围的人得到一个很好的答案。虽然你提供了一些HTML & CSS这是不够的回答。因为很难猜测你的实际意图是什么。 NO OFFENSE

根据我的理解（如果你的问题相符）这个解决方案应该工作