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; 
}