[英]CSS image rollover map and jQuery : how to use a second li list?
我目前正在使用此可點擊的地圖( Wolf的地圖 ),但是除了用作腳本基礎的國家之外,我還要使用第二個國家列表。 由於演示的原因,第二個菜單不能與地圖位於同一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}
...
使用此功能解決的問題:
$("#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");
}
據我的理解( Guess ),您的問題是,當您將鼠標懸停在一個anchor
標簽上時,您的地圖將為空。 我認為您的問題可以通過在附加到#carteeurope li a
之前克隆new_map
和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 :其實我不明白您的問題,我只是猜測以上可能是您的問題,如果您提供了在線演示 (鏈接到您的工作頁面),則可以從社區中的人們那里得到很好的答案。 盡管您提供了一些HTML和CSS,但仍不足以回答。 因為很難猜測您的實際意圖是什么。 NO OFFENSE
根據我的理解(如果它與您的問題匹配),此解決方案應該有效
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.