CSS懸停多個領域與鼠標懸停

Question

我在創建地圖..那裏是在地圖上用CSS懸停時mouse'd在變色多個區域的過程中對一個區域圖像...

到目前爲止，我已經使用主div作爲位置：相對於主地圖圖像作爲div的背景，並絕對定位懸停的鏈接。懸停過渡到我已經使用不透明度從0到1的圖像。

我的問題是，我似乎無法鏈接多個元素（島嶼）懸停使用相同的CSS作爲休息，當其中一個鏈接的元素被淹沒了。

任何幫助將超級讚賞。

HTML

<div class="container"> 
<div id="main"> 
<img class="africa" src="./img/map/africa.png" height="50"/> 
<img class="centralamerica" src="./img/map/centralamerica.png" height="50"/> 
<img class="southamerica" src="./img/map/southamerica.png" height="50"/> 
<img class="asiapacific" src="./img/map/asiapacific.png" height="50"/> 

<a id="islandlink" href="#islandlink"> 
<img class="caribean" src="./img/map/caribean.png" height="50"/> 
<img class="madagascar" src="./img/map/madagascar.png" height="50"/> 
<img class="pacific" src="./img/map/pacific.png" height="50"/></a> 

    </div> 
</div> 

CSS

.container { 
    background-image: url(../img/map/map.png); 
} 

#main{ 
background-image: url(../img/map/map.png); 
background-size: 960px 560px; 
background-repeat: no-repeat; 
width:960px; 
height:560px; 
position:relative; 
} 

#main img.africa { 
top: 248px; 
left: 405.59px; 
height: 35.5%; 
position: absolute; 
width: 18%; 
opacity:0; 
} 

#main img.southamerica { 
top: 316px; 
left: 240px; 
height: 35%; 
position: absolute; 
width: 13.5%; 
opacity:0; 
} 

#main img.centralamerica { 
top: 256px; 
left: 158px; 
height: 12.7%; 
position: absolute; 
width: 10.8%; 
opacity:0; 
} 

#main img.asiapacific { 
top: 188px; 
left: 584.5px; 
height: 49%; 
position: absolute; 
opacity:0; 
} 

#main img.africa:hover { 
top: 248px; 
left: 405.59px; 
height: 35.5%; 
position: absolute; 
width: 18%; 
opacity:1; 
transition: opacity .5s ease-in-out; 
-moz-transition: opacity .5s ease-in-out; 
-webkit-transition: opacity .5s ease-in-out; 
} 

#main img.southamerica:hover { 
top: 316px; 
left: 240px; 
height: 35%; 
position: absolute; 
width: 13.5%; 
opacity:1; 
transition: opacity .5s ease-in-out; 
-moz-transition: opacity .5s ease-in-out; 
-webkit-transition: opacity .5s ease-in-out; 
} 

#main img.centralamerica:hover { 
top: 256px; 
left: 158px; 
height: 12.7%; 
position: absolute; 
width: 10.8%; 
opacity:1; 
transition: opacity .5s ease-in-out; 
-moz-transition: opacity .5s ease-in-out; 
-webkit-transition: opacity .5s ease-in-out; 
} 

#main img.asiapacific:hover { 
top: 188px; 
left: 584.5px; 
height: 49%; 
position: absolute; 
opacity:1; 
transition: opacity .5s ease-in-out; 
-moz-transition: opacity .5s ease-in-out; 
-webkit-transition: opacity .5s ease-in-out; 
} 

<!--Islands--> 

#islandlink { 
top: 316px; 
left: 240px; 
height: 35%; 
position: relative; 
width: 13.5%; 
opacity:1; 
} 

#islandlink img.caribean { 
top: 288px; 
left: 251px; 
height: 3.3%; 
position: absolute; 
opacity:0; 
} 

#islandlink img.madagascar { 
top: 376px; 
left: 548px; 
height: 6.5%; 
position: absolute; 
opacity:0; 
} 

#islandlink img.pacific { 
top: 346px; 
left: 816px; 
height: 5%; 
position: absolute; 
opacity:0; 
} 

#islandlink img:hover { 
opacity:1; 
transition: opacity .5s ease-in-out; 
-moz-transition: opacity .5s ease-in-out; 
-webkit-transition: opacity .5s ease-in-out; 

} 
} 

Answer 1

嘗試與改變你的CSS如果你希望所有的島嶼影像出現在同一時間。

#islandlink:hover img { 
    transition: opacity .5s ease-in-out; 
    -moz-transition: opacity .5s ease-in-out; 
    -webkit-transition: opacity .5s ease-in-out; 
    opacity:1; 
}