CSS 将多个区域悬停在一个区域上，鼠标悬停在图像上

Question

我正在创建 map 。当鼠标悬停在 map 上时，有多个区域会使用 CSS 悬停来改变颜色...

到目前为止，我已经将主 div 用作 position:relative，将主 map 图像用作 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;
}