獲取一個html鏈接來激活一個css圖像映射懸停

Question

我已經看了一些其他問題，但沒有找到任何解釋這一點給我。我在這方面很初學。這是這個網站：http://www.lostpathway.com/village.html 我有一個圖像地圖在CSS（見下文）。當你將鼠標懸停在地圖上並點擊某個區域時，它會顯示在相應的網頁上。我在頁面頂部也有一個css菜單，它在菜單上有一個懸停效果，並且也會轉到相應的頁面。我想要做的是鏈接菜單和圖像映射，以便當您將鼠標懸停在菜單區域上時，它也會激活圖像映射懸停，反之亦然。我一直無法弄清楚如何做到這一點。任何幫助將受到歡迎。

/* Visible image map container */ 
#puttygut { 
position: relative; 
width: 900px; 
height: 697px; 
border: 2px solid; 
background: #205a4d url(./villagemap.gif) no-repeat; 
margin: 0em auto; 
padding: 0; 
} 

/* List styling */ 
#puttygut li { 
display: block; 
position: absolute; 
list-style: none; 
margin: 0; 
padding: 0; 
} 

/* Link styling */ 
#puttygut a { 
display: block; 
text-indent: -9999px; 
text-decoration: none; 
outline: none; 
cursor: default; 
} 

/* position on the image (z-index goes here) */ 
#memory {left: 171px; top: 15px; z-index: 10;} 
#timberlost {left: 2px; top: 249px;} 
#greyhorse {left: 248px; top: 291px;} 
#visions {left: 390px; top: 355px;} 
#cottage {left: 617px; top: 39px; z-index: 10;} 
#windmill {left: 569; top: 462;} 


/* width & height */ 
#memory a {width: 220px; height: 150px;} 
#timberlost a {width: 185px; height: 232px;} 
#greyhorse a {width: 152px; height: 130px;} 
#visions a {width: 105px; height: 75px;} 
#cottage a {width: 126px; height: 120px;} 
#windmill a {width: 63px; height: 80;} 

/* hover image position */ 
#memory a:hover {background: url(./villagemap.gif) -31px -740px no-repeat;} 
#timberlost a:hover {background: url(./villagemap.gif) -610px -951px no-repeat; } 
#greyhorse a:hover {background: url(./villagemap.gif) -622px -769px no-repeat;} 
#visions a:hover {background: url(./villagemap.gif) -65px -970px no-repeat;} 
#cottage a:hover {background: url(./villagemap.gif) -384px -939px no-repeat;} 
#windmill a:hover {background: url(./villagemap.gif) -351px -783px no-repeat;}/* Visible image map container */ 
#puttygut { 
position: relative; 
width: 900px; 
height: 697px; 
border: 2px solid; 
background: #205a4d url(./villagemap.gif) no-repeat; 
margin: 0em auto; 
padding: 0; 
} 

/* List styling */ 
#puttygut li { 
display: block; 
position: absolute; 
list-style: none; 
margin: 0; 
padding: 0; 
} 

/* Link styling */ 
#puttygut a { 
display: block; 
text-indent: -9999px; 
text-decoration: none; 
outline: none; 
cursor: default; 
} 

/* position on the image (z-index goes here) */ 
#memory {left: 171px; top: 15px; z-index: 10;} 
#timberlost {left: 2px; top: 249px;} 
#greyhorse {left: 248px; top: 291px;} 
#visions {left: 390px; top: 355px;} 
#cottage {left: 617px; top: 39px; z-index: 10;} 
#windmill {left: 569; top: 462;} 


/* width & height */ 
#memory a {width: 220px; height: 150px;} 
#timberlost a {width: 185px; height: 232px;} 
#greyhorse a {width: 152px; height: 130px;} 
#visions a {width: 105px; height: 75px;} 
#cottage a {width: 126px; height: 120px;} 
#windmill a {width: 63px; height: 80;} 

/* hover image position */ 
#memory a:hover {background: url(./villagemap.gif) -31px -740px no-repeat;} 
#timberlost a:hover {background: url(./villagemap.gif) -610px -951px no-repeat; } 
#greyhorse a:hover {background: url(./villagemap.gif) -622px -769px no-repeat;} 
#visions a:hover {background: url(./villagemap.gif) -65px -970px no-repeat;} 
#cottage a:hover {background: url(./villagemap.gif) -384px -939px no-repeat;} 
#windmill a:hover {background: url(./villagemap.gif) -351px -783px no-repeat;} 

Answer 1

有純CSS沒有辦法在另一個除了當元素是兄弟姐妹，父母，等

在你的情況不多的情況下懸停改變造型，你需要一個非常少量的Jquery，我們將以你的「Memory Tree」鏈接爲例。

給每個<a>具有相同href值相同的類：

<a href="./memory.html" id="memory1" class="memory"> <span> ... </span> </a> 
<a href="./memory.html" id="memory2" class="memory"> <img> </a> 

然後jQuery中：

$(".memory").on("mouseover", function() { 
    $("#memory1").css("background-color","green"); // Whatever green that is 
    $("#memory2").css("background", "url(./villagemap.gif) -31px -740px no-repeat"); 
});