HTML CSS 更改区域上 Hover 上的 BG

Question

I would like to change the image depending on what area I hover.

Unfortunately, I have to realize it using only HTML/CSS. I have already read and understood similar amounts but I can't get the desired result. Does anyone have an idea?

 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>

Answer 1

You use wrong selector, need change to .box.GER instead of box.GER

 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>