我正在创建 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;
}
}
最佳答案
如果您希望所有岛屿图像同时出现,请尝试更改您的 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 将多个区域悬停在一个区域上,鼠标悬停在图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24578953/