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 li a的元素时触发相同的操作。我试过这个：

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

我想添加的菜单

<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

#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

就我的理解（猜猜）而言，问题是，当您将鼠标悬停在anchor标记上时，地图就会变空。我认为你的问题可以通过克隆new_map＆amp;在追加new_bg

之前#carteeurope li a

您的实际代码，

$("#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 ：其实我不明白你的问题，我只是猜到上面可能是你的问题，你可以从这个社区的人那里得到一个很好的答案，如果你提供了一个在线< strong>演示（链接到您的工作页面）。虽然您提供了一些 HTML ＆amp; CSS 这还不够回答。因为很难猜出你的实际意图是什么。 NO OFFENSE

根据我的理解（如果它符合你的问题），这个解决方案应该可行

CSS图像翻转图和jQuery：如何使用第二个li列表？

2 个答案: