我想改变图像取决于什么区域我悬停。
不幸的是，我只能使用HTML/CSS来实现它。 我已经阅读和理解了类似的数量，但我不能得到想要的结果。 有人有主意吗？
null
body {
background-color: white;
justify-content: center;
align-content: center;
overflow: hidden;
}
.box {
position: relative;
width: 1044px;
height: 461px;
}
.box .screen {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 0.7s;
}
box.GER {
background: url('worldmap.png');
}
box.GER:hover {
background : url("worldmap_ger.png");
}
<div class="box">
<img src="worldmap.png" usemap="#image-map">
<map src="worldmap.png" name="image-map">
<div class="GER">
<area target="GER" alt="GER" title="GER" href="linkGER" coords="508,263,510,255,515,251,527,254,530,264,525,268,526,278,512,278,508,273" shape="poly">
</div>
null
您使用了错误的选择器，需要更改为.box.ger而不是box.ger
null
body {
background-color: white;
justify-content: center;
align-content: center;
overflow: hidden;
}
.box {
position: relative;
width: 1044px;
height: 461px;
}
.box .screen {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: 0.7s;
}
.box .GER {
background: url('https://pngimg.com/uploads/world_map/world_map_PNG28.png');
border: 1px solid red;
height: 200px;
}
.box .GER:hover {
background : url("https://w7.pngwing.com/pngs/944/256/png-transparent-world-map-globe-world-map-flat-earth-asia-miscellaneous-blue-world.png");
}<div class="box">
<map src="https://pngimg.com/uploads/world_map/world_map_PNG28.png" name="image-map">
<div class="GER">
<area target="GER" alt="GER" title="GER" href="linkGER" coords="508,263,510,255,515,251,527,254,530,264,525,268,526,278,512,278,508,273" shape="poly">
</div>