Question

我正在创建一个地图..当鼠标悬停时，有多个区域使用CSS悬停在地图上改变颜色......

到目前为止，我已经使用主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;
}

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

1 个答案: